"tsspdcl-home-theme"
Bootstrap 3.3.0 Snippet by vara24

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 */ html { font-size:62.5%;overflow-x: hidden;} <!-- /* 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; }

Related: See More


Questions / Comments: