<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Multi level Navbar Menu</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="../css/animate.min.css" rel="stylesheet">
<link href="css/main.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<!--<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">.-->
<style type="text/css">
/* Set a base */
<!--
/* iPhone landscape range
@media (min-width:321px) and (max-width:480px) {
html { font-size:1.6em }
}
/* larger than iPhone landscape, an in the iPad portrait range
@media (min-width:481px) and (max-width:768px) {
html { font-size:1.6em }
}
/* bigger than iPad portrait
@media (min-width:769px) {
html { font-size:2em }
*/-->
/* To Dropdown navbar dropdown on hover */
.navbar-nav > li:hover > .dropdown-menu {
display: block;
}
.dropdown-submenu {
position: relative;
}
.dropdown-submenu>.dropdown-menu {
top: 0;
left: 100%;
margin-top: -6px;
margin-left: -1px;
-webkit-border-radius: 0 6px 6px 6px;
-moz-border-radius: 0 6px 6px;
border-radius: 0 6px 6px 6px;
}
.dropdown-submenu:hover>.dropdown-menu {
display: block;
}
.dropdown-submenu>a:after {
display: block;
content: " ";
float: right;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
border-width: 5px 0 5px 5px;
border-left-color: #ccc;
margin-top: 5px;
margin-right: -10px;
}
.dropdown-submenu:hover>a:after {
border-left-color: #fff;
}
.dropdown-submenu.pull-left {
float: none;
}
.dropdown-submenu.pull-left>.dropdown-menu {
left: -100%;
margin-left: 10px;
-webkit-border-radius: 6px 0 6px 6px;
-moz-border-radius: 6px 0 6px 6px;
border-radius: 6px 0 6px 6px;
}
.navbar > .container .navbar-brand, .navbar > .container-fluid .navbar-brand{
margin-left: -91px;
width: 339px;
}
.col-md-8{
width: 102.667%;
}
/* Popup Code */
#popup .modal-dialog {
width: 400px;
padding: 0px ;
position: relative;
}
#popup .modal-dialog:before {
content: '';
height: 0px;
width: 0px;
border-left: 50px solid #17B6BB;
border-right: 50px solid transparent;
border-bottom: 50px solid transparent;
position: absolute;
top: 1px;
left: -14px;
z-index: 99;
}
.custom-modal-header {
text-align: center;
color: #17b6bb;
text-transform: uppercase;
letter-spacing: 2px;
border-top: 4px solid;
}
#popup .modal-dialog .close {
z-index: 99999999;
color: white;
text-shadow: 0px 0px 0px;
font-weight: normal;
top: 4px;
right: 6px;
position: absolute;
opacity: 1;
}
.custom-modal-header .modal-title {
/* font-weight: bold; */
font-size: 18px;
}
#popup .modal-dialog:after {
content: '';
height: 0px;
width: 0px;
/* border-right: 50px solid rgba(255, 0, 0, 0.98); */
border-right: 50px solid #17b6bb;
border-bottom: 50px solid transparent;
position: absolute;
top: 1px;
right: -14px;
z-index: 999999;
}
/* Footer CSS */
.full {
width: 100%;
}
.gap {
height: 30px;
width: 100%;
clear: both;
display: block;
}
.footer {
background: #333;
height: auto;
padding-bottom: 30px;
position: relative;
width: 100%;
border-bottom: 1px solid #CCCCCC;
border-top: 1px solid #DDDDDD;
}
.footer p {
margin: 0;
}
.footer img {
max-width: 100%;
}
.footer h4 {
border-bottom: 1px solid #BAC1C8;
color: #fff;
font-size: 13px;
font-weight: 600;
line-height: 20px;
padding: 40px 0 10px;
text-transform: uppercase;
}
.footer ul {
font-size: 13px;
list-style-type: none;
margin-left: 0;
padding-left: 0;
margin-top: 15px;
color: #fff;
}
.footer ul li a {
padding: 0 0 5px 0;
display: block;
}
.footer a {
color: #fff;
}
.support li h4 {
font-size: 15px;
font-weight: lighter;
line-height: normal;
margin-bottom: 0 !important;
padding-bottom: 0;
}
.social li {
background: none repeat scroll 0 0 #B5B5B5;
border: 2px solid #B5B5B5;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-o-border-radius: 50%;
-ms-border-radius: 50%;
border-radius: 50%;
float: left;
height: 36px;
line-height: 36px;
margin: 0 8px 0 0;
padding: 0;
text-align: center;
width: 36px;
transition: all 0.5s ease 0s;
-moz-transition: all 0.5s ease 0s;
-webkit-transition: all 0.5s ease 0s;
-ms-transition: all 0.5s ease 0s;
-o-transition: all 0.5s ease 0s;
}
.social li:hover {
transform: scale(1.15) rotate(360deg);
-webkit-transform: scale(1.1) rotate(360deg);
-moz-transform: scale(1.1) rotate(360deg);
-ms-transform: scale(1.1) rotate(360deg);
-o-transform: scale(1.1) rotate(360deg);
}
.social li a {
color: #EDEFF1;
}
.social li:hover {
border: 2px solid #2c3e50;
background: #2c3e50;
}
.social li a i {
font-size: 16px;
margin: 0 0 0 5px;
color: #EDEFF1 !important;
}
.footer-bottom {
background: #E3E3E3;
border-top: 1px solid #DDDDDD;
padding-top: 10px;
padding-bottom: 10px;
}
.footer-bottom p.pull-left {
padding-top: 6px;
}
/* Menu Upon Body */
.list-group-horizontal .list-group-item {
display: inline-block;
background-color: #001044;
color: #c49123;
}
.list-group-horizontal .list-group-item {
margin-bottom: 0;
margin-left:-4px;
margin-right: 0;
}
.list-group-horizontal .list-group-item:first-child {
border-top-right-radius:0;
border-bottom-left-radius:4px;
}
.list-group-horizontal .list-group-item:last-child {
border-top-right-radius:4px;
border-bottom-left-radius:0;
}
.list-group-horizontal .list-group-item:hover{
background-color: #fff;
}
.menu{
padding-right: 50px;
font-size: 12px;
}
/*
@media screen and (device-width: 1920px)
{
width: 100%;
}*/
</style>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="css/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(window).load(function(){
setTimeout(function() {
$('#popup').modal('show');
}, 2500);
});
//$(window).load(function(){
//setTimeout(function() {
//$('#popup').modal('hide');
//}, 6000);
//});
</script>
</head>
<body background="img/blue-blur.jpg">
<style>
body {
padding-top: 50px;
}
</style>
<style>
body {
padding-top: 50px;
}
</style>
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<!-- <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>-->
<a class="navbar-brand" href="#"><img src="http://vara.website.tk/tsspdcl/img/logo.PNG" width="100%" height="330%" alt="TSSPDCL LOGO" style="padding-left: 35px;" /></a>
</div>
<div class="navbar-brand" ><img src="http://vara.website.tk/tsspdcl/img/tssp.PNG" alt="TSSPDCL" style="align:center; padding-left: 200px; height:60px; width:500px;"/></div>
<!--<div class="collapse navbar-collapse" data-hover="dropdown" data-animations="fadeInDown fadeInRight fadeInUp fadeInLeft">
<ul class="nav navbar-nav">
<li>
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Tariffs & Regulations<b class="caret"></b></a>
<ul class="dropdown-menu multi-level dropdown-menu-right" role="menu" aria-labelledby="dLabel">
<li><a href="#">Tariff Schedules</a></li>
<li><a href="#">Current Year Orders</a></li>
<li><a href="#">Earlier Orders</a></li>
<li class="dropdown-submenu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">TSERC Regulations</a>
<ul class="dropdown-menu">
<li><a href="#">DRAFT</a></li>
<li><a href="#">FINAL</a></li>
</ul>
</li>
<li><a href="#">ARR Filings</a></li>
<li><a href="#">FSA</a></li>
<li class="dropdown-submenu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">GTCS</a>
<ul class="dropdown-menu">
<li><a href="#">Amendment of GTCS</a></li>
<li><a href="#">Compendium of GTCS</a></li>
</ul>
</li>
<li><a href="#">DC ans SD Charges</a></li>
<li><a href="#">Cost Data FY2016-17</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav">
<li>
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Tenders<b class="caret"></b></a>
<ul class="dropdown-menu multi-level">
<li><a href="#">P & MM Tender Notices</a></li>
<li><a href="#">P & MM Tender Specifications</a></li>
<li><a href="#">General Tenders</a></li>
<li><a href="#">Purchase Orders</a></li>
<li><a href="#">Nomination's</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav">
<li>
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Services<b class="caret"></b></a>
<ul class="dropdown-menu multi-level">
<li><a href="#">Customer Service Centers</a></li>
<li><a href="#">Fuse-Off Call Centers</a></li>
<li><a href="#">General Tenders</a></li>
<li><a href="#">Purchase Orders</a></li>
<li><a href="#">Nomination's</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav">
<li>
<a href="#" class="dropdown-toggle" data-toggle="dropdown">News Gallery<b class="caret"></b></a>
<ul class="dropdown-menu multi-level">
<li><a href="#">eNews Letter</a></li>
<li><a href="#">Electrical Saving Tips</a></li>
<li><a href="#">Electrical Safety</a></li>
<li><a href="#">Energy Conservation & Safety</a></li>
<li><a href="#">FAQ's</a></li>
<li><a href="#">Glossary</a></li>
<li><a href="#">Notice of 15th AGM</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav">
<li><a href="#" class="dropdown-toggle" data-toggle="dropdown">Careers</a></li>
</ul>
<ul class="nav navbar-nav">
<li>
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Company Information<b class="caret"></b></a>
<ul class="dropdown-menu multi-level">
<li><a href="#">Supplier Payment Status</a></li>
<li><a href="#">Contractors</a></li>
<li><a href="#">Blacklisted Firms</a></li>
<li><a href="#">Accident Compensation</a></li>
<li><a href="#">Annual Reports</a></li>
<li><a href="#">Citizen's Charter</a></li>
<li><a href="#">Vigil Mechanism Policy 2014</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav">
<li>
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Renewable Energy<b class="caret"></b></a>
<ul class="dropdown-menu multi-level">
<li class="dropdown-submenu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Materials and Work</a>
<ul class="dropdown-menu">
<li><a href="#">Solar Power Developers Specifications</a></li>
</ul>
</li>
<li><a href="#">Power evacuation Capacity</a></li>
<li class="dropdown-submenu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Solar Rooftop Netmetering</a>
<ul class="dropdown-menu">
<li><a href="#">Empanelled Suppliers</a></li>
<li><a href="#">Regulation 06 of 2016 Net <br>Metering</a></li>
<li><a href="#">Solar Rooftop Netmetering <br>Guidelines</a></li>
<li><a href="#">Application Form</a></li>
<li><a href="#">Issue of Techinical Feasibility <br>approval to Consumer Format</a></li>
<li><a href="#">Agreement Form</a></li>
<li><a href="#">Work Completion Report <br>Submitted to be by Consumer</a></li>
<li><a href="#">Synchronization/Test Report</a></li>
<li><a href="#">Flow Chart for Availing Net <br>Metering Facility</a></li>
<li><a href="#">Know Your Applicatiom Status <br>(Netmetering)</a></li>
<li><a href="#">Netmetering Applications <br>Recieved</a></li>
<li><a href="#">FAQ</a></li>
</ul>
</li>
<li><a href="#">Telangana Solar Bid-2015</a></li>
<li><a href="#">Telangana State Solar Power <br>Policy</a></li>
<li><a href="#">Telangana Solar Bid-2014</a></li>
<li><a href="#">Telangana State Wind Power <br>Policy 2016</a></li>
<li><a href="#">Work Flow Chart Under Solar <br>Bidding</a></li>
<li><a href="#">Solar Plant Commissioning <br>Certificate</a></li>
<li><a href="#">List of Solar Power Developers <br>515 MW in the year 2014</a></li>
<li><a href="#">List of Solar Power Developers <br>2000 MW in the year 2015</a></li>
<li><a href="#">Solar Projects Synchronised <br>with grid as on 30.04.2016</a></li>
<li><a href="#">Minutes of Metering with <br>Solar Power Developers</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav">
<li>
<a href="#" class="dropdown-toggle" data-toggle="dropdown">About Us<b class="caret"></b></a>
<ul class="dropdown-menu multi-level">
<li><a href="#">About TSSPDCL</a></li>
<li><a href="#">Board of Directors</a></li>
<li><a href="#">About CGRF-I</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav">
<li>
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Contact Us</a>
</li>
</ul>
</div><!--/.nav-collapse -->
<img src="http://vara.website.tk/tsspdcl/img/snipp.PNG" alt="snipp" width="28.5%%" height="28.5%" class="pull-right" style="padding-top: 19px;padding-left: 35px;"/>
</div>
</div>
<br>
<br>
<!-- Menu up-on body -->
<div class="row">
<div class="menu" align="center">
<div class="list-group list-group-horizontal">
<a href="#" class="list-group-item">Home</a>
<a href="#" class="list-group-item">Portfolio</a>
<a href="#" class="list-group-item">Our Work</a>
<a href="#" class="list-group-item">Our Growth</a>
<a href="#" class="list-group-item">Success Story</a>
<a href="#" class="list-group-item">MileStones</a>
<a href="#" class="list-group-item">Achievements</a>
</div>
</div>
</div>
<!--Menu Ending -->
<div class="container wrap sidebar-left">
<div class="row">
<div class="header col-xs-12">
<div class="container-fluid">
<div class="row">
<div class="sidebar col-xs-3">
<div class="well">
<div class="v-menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">AGL Seniority List</a></li>
<li class="has-sub"><a href="#" >Announcements<span class="caret"></span></a>
<ul>
<li><a href="#">Hourly Quota and Demand</a></li>
<li><a href="#">Breakdowns and Interruptions</a></li>
</ul>
</li>
<li><a href="#">Supplier Payment Status</a></li>
<li><a href="#">Service Registration</a></li>
<li><a href="#">Self-Certification/Third Party Inspection System (upto 650V)</a></li>
<li><a href="#">Complaint Registration</a></li>
<li><a href="#" class="has-sub">TS-iPASS<span class="caret"></span></a>
<ul>
<li><a href="#">Registration at TS-iPASS</a></li>
<li><a href="#">Application Status</a></li>
<li><a href="#">CAF - Common Application Form</a></li>
<li><a href="#">Documents Required</a></li>
<li><a href="#">Information on Fixed Cost of Estimates</a></li>
<li><a href="#">Time Limit for Sanction of Estimate</a></li>
<li><a href="#">Circular Memo</a></li>
</ul>
</li>
<li><a href="#" class="has-sub">Online Services<span class="caret"></span></a>
<ul>
<li><a href="#">Bill Enquiry LT</a></li>
<li><a href="#">Bill Enquiry HT</a></li>
<li><a href="#">Bill Payment</a></li>
</ul>
</li>
<li><a href="#" class="has-sub">My Application Status<span class="caret"></span></a>
<ul>
<li><a href="#">New Servcice Search</a></li>
<li><a href="#">New Servcice (LT)</a></li>
<li><a href="#">New Servcice Apartment (LT)</a></li>
<li><a href="#">New Servcice (HT)</a></li>
<li><a href="#">Complaints</a></li>
<li><a href="#">NetMetering</a></li>
</ul>
</li>
<li><a href="#" class="has-sub">New Servcice Connections Performance<span class="caret"></span></a>
<ul>
<li><a href="#">New Servcice Ledger</a></li>
<li><a href="#">MIS of New Servcice DASHBOARD</a></li>
</ul>
</li>
<li><a href="#">Downloads</a></li>
<li><a href="#">Photo Gallery</a></li>
<li><a href="#" class="has-sub">Related Links<span class="caret"></span></a>
<ul>
<li><a href="#">TSTRANSCO</a></li>
<li><a href="#">TSGENCO</a></li>
<li><a href="#">TSSPDCL Orders</a></li>
<li><a href="#">TSNPDCL</a></li>
<li><a href="#">TSERC</a></li>
<li><a href="#">APERC</a></li>
<li><a href="#">APTRANSCO</a></li>
<li><a href="#">APGENCO</a></li>
<li><a href="#">CLDF - UP Energisations of BoreWells</a></li>
</ul>
</li>
<li><a href="#" class="has-sub">NOC For OA<span class="caret"></span></a>
<ul>
<li><a href="#">Trader</a></li>
<li><a href="#">Consumer</a></li>
<li><a href="#">Generator</a></li>
</ul>
</li>
<li><a href="#">Solar Rooftop NetMetering<span class="caret"></span></a>
<ul>
<li><a href="#">Empanelled Suppliers</a></li>
<li><a href="#">Regulation 60 of 2016 NetMetering</a></li>
<li><a href="#">Solar Rooftop Net Meterinf Guidelines</a></li>
<li><a href="#">Application form</a></li>
<li><a href="#">Issue of Technical Feasibility approval to consumer format</a></li>
<li><a href="#">Agreement form</a></li>
<li><a href="#">Work Completion report to be submitted by Consumer</a></li>
<li><a href="#">Synchronization report/Test Report</a></li>
<li><a href="#">Flow chart for availing Net metering facility</a></li>
<li><a href="#">Know Your Application Status(NetMetering)</a></li>
<li><a href="#">NetMetering Applications recieved</a></li>
<li><a href="#">DTR wise Net meter capacity</a></li>
<li><a href="#">FAQ</a></li>
</ul>
</li>
<li><a href="#">Mobile Number Updation</a></li>
<li><a href="#">Outage Information Urja Mitra</a></li>
<li><a href="#">Employee Medical Credit Card Status</a></li>
<li><a href="#">Electrical Accidents Reporting</a></li>
<li><a href="#" class="has-sub">Feeder Data Management<span class="caret"></span></a>
<ul>
<li><a href="#">Feeder Outage Report</a></li>
<li><a href="#">Feeder Data Analysis</a></li>
</ul>
</li>
<li><a href="#">Power Breakdown Information</a></li>
<li><a href="#">Scheduled Outage Information</a></li>
<li><a href="#">No Power Clickme</a></li>
<li><a href="#">SCADA</a></li>
<li><a href="#" >Ease of Doing Business(EoDB)</a></li>
</ul>
</div>
</div>
</div>
<!--Dummy Code-->
<div class="sidebar1 col-xs-3" align="">
<div class="container-fluid">
<div class="row">
<div class="login-panel panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Sign In</h3>
</div>
<div class="panel-body">
<form role="form">
<fieldset>
<div class="form-group"> <span></span>Email:
<input class="form-control" placeholder="E-mail" name="email" type="email" autofocus="">
</div>
<div class="form-group"> <span>Password:</span>
<input class="form-control" placeholder="Password" name="password" type="password" value="">
</div>
<div class="checkbox">
<label>
<input name="remember" type="checkbox" value="Remember Me">
Remember Me </label>
</div>
<!-- Change this to a button or input when using this as a form -->
<a href="#" class="btn btn-sm btn-success">Login</a>
</fieldset>
</form>
</div>
</div>
</div><!-- Login End -->
<!-- Hot Links -->
<div class="row">
<div class="login-panel panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Hot Links</h3>
</div>
<div class="panel-body">
<marquee behaviour="scroll" direction="up" onmouseover="this.stop();" onmouseout="this.start();" scrollamount="2">
<div class="links"> <img src="http://vara.website.tk/tsspdcl/img/green-neon-arrows.png" alt="arrow" width="12%" height="12%" /><a href="#" style="color:blue;">ARR,TARIF,CROSS subsidy surcharge for FY2017-18 with additional information.</a><br>
<br>
<img src="http://vara.website.tk/tsspdcl/img/green-neon-arrows.png" alt="arrow" width="12%" height="12%" /><a href="#" style="color:blue;">Request for Proposal (RfP) NoticeShort term power Procurement 25.07.2017 </a><br>
<br>
<img src="http://vara.website.tk/tsspdcl/img/green-neon-arrows.png" alt="arrow" width="12%" height="12%" /><a href="#" style="color:blue;">Replies to the Objections on ARR&Tariff Filings Fy 2017-18</a><br>
<br>
</div>
</marquee>
</div>
</div>
</div><!-- Hot Links Ends -->
<!-- Official Mail Login -->
<div class="row">
<div class="login-panel panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Official Mail Login Here</h3>
</div>
<div class="panel-body" align="center"> <a class="btn btn-success" href="mail-login.html">Official Mail Login</a> </div>
</div>
</div>
<!-- Official Mail Login Ends-->
<!-- Slide show -->
<div class="row">
<div class="row slide-mini">
<div class="slider-content slider-section" style="width:260.5px;"> <img class="mySlider" src="https://static.pexels.com/photos/69917/pexels-photo-69917.jpeg" width="100%" /> <img class="mySlider" src="https://static.pexels.com/photos/36764/marguerite-daisy-beautiful-beauty.jpg" width="100%" /> <img class="mySlider" src="https://static.pexels.com/photos/34135/pexels-photo.jpg" width="100%" />
<!--<img class="mySlides" src="" style="width:100%">-->
</div>
<script type="text/javascript">
var myIndex = 0;
carousel();
function carousel() {
var i;
var x = document.getElementsByClassName("mySlider");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
myIndex++;
if (myIndex > x.length) {myIndex = 1}
x[myIndex-1].style.display = "block";
setTimeout(carousel, 4000); // Change image every 4 seconds
}
</script>
</div>
</div>
<!-- Slide Show Ends -->
</div>
</div>
<!--Dummy Code-->
<!-- Slideshow -->
<div class="container" align="center">
<div class="main col-xs-6">
<div class="well">
<div class="w3-content w3-section" style="max-width:500px;">
<img class="mySlides" src="http://vara.website.tk/tsspdcl/img/electrical-towers.jpg" style="width:100%" alt="electrical-towers" />
<img class="mySlides" src="http://vara.website.tk/tsspdcl/img/power-station.jpg" style="width:100%" alt="power-station" />
<img class="mySlides" src="http://vara.website.tk/tsspdcl/img/Wind-Turbines-hd.jpg" style="width:95%;height:278.9px;" alt="wind turbines" />
<!--<img class="mySlides" src="" style="width:100%">-->
</div>
<script>
var myIndex = 0;
carousel();
function carousel() {
var i;
var x = document.getElementsByClassName("mySlides");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
myIndex++;
if (myIndex > x.length) {myIndex = 1}
x[myIndex-1].style.display = "block";
setTimeout(carousel, 3000); // Change image every 3 seconds
}
</script>
<div class="Apps"><h1 align="center">Download Our App</h1></div>
<a href="https://play.google.com/store/apps/details?id=supply.power.tsspdcl" target="_blank"><img src="img/play-store-button.png" alt="android app" width="40%"></a><a href="https://itunes.apple.com/us/app/tsspdcl/id1149826950?ls=1&mt=8" target="_blank"><img src="img/app-store.png" alt="ios app" width="38.9%"></a>
</div><hr/>
</div>
<div class="main col-xs-6" align="center">
<div class="well">
<div class="row">
<h3>Pay Bills</h3>
<p style="font-size: 12px;">Vara Prasad is a web designer currently working at Vega IT</p>
<a href="#"><img src="http://vara.website.tk/tsspdcl/img/Paytm-Logo.jpg" alt="Paytm Payments" width="120px" style="border: 1px solid black;"></a> <a href="#"><img src="http://vara.website.tk/tsspdcl/img/billdesk.gif" alt="Billdesk Payments" width="120px" style="border: 1px solid black;"></a>
<a href="#"><img src="http://vara.website.tk/tsspdcl/img/twallet.jpg" alt="Twallet Payments" width="120px" style="border: 1px solid black;"></a> <a href="#"><img src="http://vara.website.tk/tsspdcl/img/Transaction-Analysts.jpg" alt="Transaction-Analyst Payments" width="120px" height="120px" style="border: 1px solid black;"></a>
<hr/>
<h3>Electricity Billing Information</h3>
<p style="font-size: 12px;">Vara Prasad is a web designer currently working at Vega IT</p>
<a href="#"><img src="http://vara.website.tk/tsspdcl/img/billinfo.gif" alt="bill information" style="border: 1px solid black;height:92px;"></a>
</div>
</div>
<!--<hr>
<div class="col-sm-3" width="150px">
<h3>Complaint Registration</h3>
<p style="font-size: 12px;">Vara Prasad is a web designer currently working at Vega IT</p>
<a href="#"><img src="img/complaint.jpeg" alt="Complaint Registration" width="50%" style="border: 1px solid black;"></a>
</div>-->
</div>
<div id="popup" class="modal fadeOut" role="dialog" >
<div class="modal-dialog" onLoad="setTimeout('window.close()', 6000);">
<!-- Modal content-->
<div class="modal-content row">
<div class="modal-header custom-modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Welcome To TSSPDCL</h4>
</div>
<div class="modal-body" >
<p align="center"><h1>Welcome To TSSPDCL</h1><br>
<h4>Now Pay Bills at a click With Your Favourite Wallets</h4>
<a href="#" align="center"><img src="https://www.mobigyaan.com/wp-content/uploads/2017/03/Paytm-logo.jpg" alt="paytm wallet" width="40%" style="border: 1px solid black;"></a><a href="#" align="center"><img src="http://vara.website.tk/tsspdcl/img/billdesk.gif" width="30%" alt="billdesk" style="border: 1px solid black;"></a>
<a href="#" align="center"><img src="https://www.tssouthernpower.com/framework/skins/CPDCL_SKIN/images/BillPay/twallet.jpg" width="25%" alt="T-wallet" style="border: 1px solid black;"></a>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<footer>
<div class="footer" id="footer">
<div class="container">
<div class="row">
<div class="col-lg-2 col-md-2 col-sm-4 col-xs-6">
<h4>My Account</h4>
<ul>
<li> <a href="#"> Start,Stop or Move Service </a> </li>
<li> <a href="#"> How to Pay Your Bill </a> </li>
<li> <a href="#"> Understanding Your Bill </a> </li>
<li> <a href="#"> Energy Assist Programs </a> </li>
<li><a hre="#">Rates & Regulations</a></li>
<li><a href="#">Customer Newsletter</a></li>
<li><a href="#">Power Quality</a></li>
</ul>
</div>
<div class="col-lg-2 col-md-2 col-sm-4 col-xs-6">
<h4> For Businesses </h4>
<ul>
<li> <a href="#"> Account Services </a> </li>
<li> <a href="#"> Electrical Installation and Standards </a> </li>
<li> <a href="#"> Commercial Rates</a> </li>
<li> <a href="#"> Power Quality for Businesses </a> </li>
</ul>
</div>
<div class="col-lg-2 col-md-2 col-sm-4 col-xs-6">
<h4> Save Energy & Money </h4>
<ul>
<li> <a href="#"> Household Tips and Resources </a> </li>
<li> <a href="#"> Rebates through TSSPDCL Energy </a> </li>
<li> <a href="#"> Calculate Energy Consumption </a> </li>
<li> <a href="#"> Energy Savings Toolkits </a> </li>
<li> <a href="#"> Time of Use Program</a></li>
<li> <a href="#"> Energy Conservation Kits for Businesses</a></li>
<li> <a href="#"> Demand Response</a></li>
</ul>
</div>
<div class="col-lg-2 col-md-2 col-sm-4 col-xs-6">
<h4> Safety & Outages </h4>
<ul>
<li> <a href="#"> Power Outages </a> </li>
<li> <a href="#"> Storm Center </a> </li>
<li> <a href="#"> Electrical Safety </a> </li>
<li> <a href="#"> Indoor Safety </a> </li>
<li> <a href="#"> Outdoor Safety</a></li>
</ul>
</div>
<div class="col-lg-2 col-md-2 col-sm-4 col-xs-6">
<h4> Clean Energy & TS </h4>
<ul>
<li> <a href="#"> Clean Energy Facts </a> </li>
<li> <a href="#"> Producing Clean Energy </a> </li>
<li> <a href="#"> Integration Tools and Resources </a> </li>
<li> <a href="#"> Electrical Vehicles </a> </li>
<li> <a href="#"> Going Solar</a></li>
<li> <a href="#"> Smart Grid and Smart Meters</a></li>
<li> <a href="#"> How You Can Help</a></li>
</ul>
</div>
<div class="col-lg-2 col-md-2 col-sm-4 col-xs-6">
<h4> Community & Education </h4>
<ul>
<li> <a href="#"> Community Events</a> </li>
<li> <a href="#"> Home Energy Challenge </a> </li>
<li> <a href="#"> Smart Power for Schools </a> </li>
<li> <a href="#"> Teachers Energy Resource Centre</a> </li>
<li> <a href="#"> Presidential Awards</a></li>
<li> <a href="#"> Career and Technical Education</a></li>
</ul>
</div>
</div>
<div class="row pull-left">
<ul>
<a href="#">Home</a> |
<a href="#">Sitemap</a> |
<a href="#">History</a><br>
<li><p><u>Contact Us</u> <br> Phone:+91-9550659565,email:ceo@vitnetworks.com</p></li>
</ul>
</div>
<div class="row pull-right">
<ul class="social">
<li> <a href="#"> <i class="fa fa-facebook"> </i> </a> </li>
<li> <a href="#"> <i class="fa fa-twitter"> </i> </a> </li>
<li> <a href="#"> <i class="fa fa-google-plus"> </i> </a> </li>
<li> <a href="#"> <i class="fa fa-pinterest"> </i> </a> </li>
<li> <a href="#"> <i class="fa fa-youtube"> </i> </a> </li>
</ul>
</div>
</div>
<!--/.row-->
</div>
<!--/.container-->
<!--/.footer-->
<div class="footer-bottom">
<div class="container">
<p class="pull-left"> Copyright © TSSPDCL 2017. All right reserved. </p>
<div class="pull-right">
<p style="font-size: 15px;color: green;"><strong>Designed By Vara Prasad</strong></p>
</div>
</div>
</div>
<!--/.footer-bottom-->
</footer>
</body>
</html>
@import url(http://fonts.googleapis.com/css?family=roboto);
.nav {
padding: 0;
margin: 0;
border: 0;
line-height: 1;
padding-left: 10px;
padding-top: 10px;
}
.nav ul,
.nav ul li,
.nav ul ul {
list-style: none;
margin: 0;
padding: 0;
}
.nav ul {
position: relative;
z-index: 500;
float: right;
}
.nav ul li {
float: right;
min-height: 0.05em;
line-height: 1em;
vertical-align: middle;
position: relative;
}
.nav ul li.hover,
.nav ul li:hover {
position: relative;
z-index: 510;
cursor: default;
}
.nav ul ul {
visibility: hidden;
position: absolute;
top: 100%;
left: 0px;
z-index: 520;
width: 100%;
}
.nav ul ul li { float: none; }
.nav ul ul ul {
top: 0;
right: 0;
}
.nav ul li:hover > ul { visibility: visible; }
.nav ul ul {
top: 0;
left: 99%;
}
.nav ul li { float: none; }
.nav ul ul { margin-top: 0.05em; }
.nav {
width: 13em;
background: #333333;
font-family: 'roboto', Tahoma, Arial, sans-serif;
font-size: 12px;
zoom: 1;
}
.nav:before {
content: '';
display: block;
}
.nav:after {
content: '';
display: table;
clear: both;
}
.nav a {
display: block;
padding: 1em 1.3em;
color: #ffffff;
text-decoration: none;
}
.nav > ul { width: 13em; }
.nav ul ul { width: 13em; }
.nav > ul > li > a {
border-right: 0.3em solid #34A65F;
color: #ffffff;
}
.nav > ul > li > a:hover { color: #ffffff; }
.nav > ul > li a:hover,
.nav > ul > li:hover a { background: #34A65F; }
.nav li { position: relative; }
.nav ul li.has-sub > a:after {
content: '»';
position: absolute;
right: 1em;
}
.nav ul ul li.first {
-webkit-border-radius: 0 3px 0 0;
-moz-border-radius: 0 3px 0 0;
border-radius: 0 3px 0 0;
}
.nav ul ul li.last {
-webkit-border-radius: 0 0 3px 0;
-moz-border-radius: 0 0 3px 0;
border-radius: 0 0 3px 0;
border-bottom: 0;
}
.nav ul ul {
-webkit-border-radius: 0 3px 3px 0;
-moz-border-radius: 0 3px 3px 0;
border-radius: 0 3px 3px 0;
}
.nav ul ul { border: 1px solid #34A65F; }
.nav ul ul a { color: #ffffff; }
.nav ul ul a:hover { color: #ffffff; }
.nav ul ul li { border-bottom: 1px solid #0F8A5F; }
.nav ul ul li:hover > a {
background: #4eb1ff;
color: #ffffff;
}
.nav.align-right > ul > li > a {
border-left: 0.3em solid #34A65F;
border-right: none;
}
.nav.align-right { float: right; }
.nav.align-right li { text-align: right; }
.nav.align-right ul li.has-sub > a:before {
content: '+';
position: absolute;
top: 50%;
left: 15px;
margin-top: -6px;
}
.nav.align-right ul li.has-sub > a:after { content: none; }
.nav.align-right ul ul {
visibility: hidden;
position: absolute;
top: 0;
left: -100%;
z-index: 598;
width: 100%;
}
.nav.align-right ul ul li.first {
-webkit-border-radius: 3px 0 0 0;
-moz-border-radius: 3px 0 0 0;
border-radius: 3px 0 0 0;
}
.nav.align-right ul ul li.last {
-webkit-border-radius: 0 0 0 3px;
-moz-border-radius: 0 0 0 3px;
border-radius: 0 0 0 3px;
}
.nav.align-right ul ul {
-webkit-border-radius: 3px 0 0 3px;
-moz-border-radius: 3px 0 0 3px;
border-radius: 3px 0 0 3px;
}
body{
font-size:0.85em;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
div#menu{
align:center;
padding-top: 4px;
}
.menu ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
display: inline-block;
font-size: 12px;
list-style-position: relative;
}
l.menu li,ul li {
float: left;
display: inline-block;
}
.menu li a,ul>li>a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.menu li a:hover, .dropdown:hover .dropbtn,ul>li>a:hover {
background-color: red;
}
.menu li.dropdown,ul li.dropdown {
display: inline-block;
}
.menu .dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.menu .dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.menu .dropdown-content a:hover {background-color: #f1f1f1;}
.menu .dropdown:hover .dropdown-content {
display: block;
}
.sidebar-left .main{
float:none;
}
.sidebar-left .sidebar{
float:left;
}
.sidebar-left .sidebar1{
float: right;
}
.sidebar-left .right{
float:right;
}
.v-menu ul{
list-style: none;
margin: 0;
font-size: 12px;
padding-left: 2px;
}
.v-menu ul li{
width: 200px;
padding: 6px;
position: relative;
background-color: #f5f5f5;
border-top: 1px solid #CCCCCC;
-webki-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.v-menu ul ul{
transition: all 0.3s;
opacity: 0;
position: absolute;
visibility: hidden;
left: 101%;
top: -2%;
z-index: 30;
}
.v-menu ul li:hover > ul{
opacity: 1;
visibility : visible;
}
.v-menu ul li a{
text-decoration: none;
color: #333;
}
/* To Dropdown navbar dropdown on hover */
.navbar-nav > li:hover > .dropdown-menu {
display: block;
}
.dropdown-submenu {
position: relative;
}
.dropdown-submenu>.dropdown-menu {
top: 0;
left: 100%;
margin-top: -6px;
margin-left: -1px;
-webkit-border-radius: 0 6px 6px 6px;
-moz-border-radius: 0 6px 6px;
border-radius: 0 6px 6px 6px;
}
.dropdown-submenu:hover>.dropdown-menu {
display: block;
}
.dropdown-submenu>a:after {
display: block;
content: " ";
float: right;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
border-width: 5px 0 5px 5px;
border-left-color: #ccc;
margin-top: 5px;
margin-right: -10px;
}
.dropdown-submenu:hover>a:after {
border-left-color: #fff;
}
.dropdown-submenu.pull-left {
float: none;
}
.dropdown-submenu.pull-left>.dropdown-menu {
left: -100%;
margin-left: 10px;
-webkit-border-radius: 6px 0 6px 6px;
-moz-border-radius: 6px 0 6px 6px;
border-radius: 6px 0 6px 6px;
}
.navbar > .container .navbar-brand, .navbar > .container-fluid .navbar-brand{
margin-left: -91px;
width: 339px;
}
.slide-mini{
width: 265px;
padding-right: 40px;
}
