<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 ----------> <nav class="navbar navbar-inverse" role="navigation"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <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="http://www.locoshop.in"><span style="color:#8ff442">LOCOSHOP</span></a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown<b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> <li class="divider"></li> <li><a href="#">One more separated link</a></li> </ul> </li> </ul> <ul class="nav navbar-nav"> <li><a href="#">Link</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> <ul class="dropdown-menu"> <!-- <li><a href="#"><span class="glyphicon glyphicon-user"></span> Your Account</a></li> <li><a href="#"><span class="glyphicon glyphicon-shopping-cart"></span> Cart</a></li>--> <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li> </ul> </li> </ul> </div><!-- /.navbar-collapse --> </nav> <div class="container content"> <div class="row "> <div class="col-xs-12 col-sm-9"> <div class="well well-lg"> <div class="container-fluid"> <div class="slider-content slider-section" width="500.5px" > <img class="mySlides" src="https://static.pexels.com/photos/35884/amazing-beautiful-beauty-blue.jpg" width="100%" /> <img class="mySlides" src="https://static.pexels.com/photos/21261/pexels-photo.jpg" width="100%" /> <img class="mySlides" src="https://static.pexels.com/photos/33688/delicate-arch-night-stars-landscape.jpg" width="100%" /> <!--<img class="mySlides" src="" style="width:100%">--> </div> </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, 2000); // Change image every 3 seconds } </script> </div> <table> <tr> <td> <div class="Apps" align="center"><h1 align="center">Download Our App</h1></div> <div class="col-md-12" align="center" > <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%" align="center"></img></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%" align="center"></img></a> </div> </td> </tr> </table> <div class="row"> <div class="col-xs-6 col-lg-6"> <h2>Heading</h2> <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p> <p><a class="btn btn-secondary" href="#" role="button">View details »</a></p> </div> <!--/span--> <div class="col-xs-6 col-lg-6"> <h2>Heading</h2> <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p> <p><a class="btn btn-secondary" href="#" role="button">View details »</a></p> </div> <!--/span--> <div class="col-xs-6 col-lg-6"> <h2>Heading</h2> <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p> <p><a class="btn btn-secondary" href="#" role="button">View details »</a></p> </div> <!--/span--> <div class="col-xs-6 col-lg-6"> <h2>Heading</h2> <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p> <p><a class="btn btn-secondary" href="#" role="button">View details »</a></p> </div> <!--/span--> </div> <!--/row--> </div> <!--/span--> <div class="row"> <div class="col-xs-6 col-sm-3 sidebar-offcanvas sidebar" id="sidebar"> <div class="container-fluid"> <div class="slider-content slider-section" style="width:270.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> 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 3 seconds } </script> </div> <br /> <table> <tr> <td> <div class="container-fluid" width="100%"> <div class="login-panel panel panel-info"> <div class="panel-heading"> <h3 class="panel-title">Sign In</h3> </div> <div class="panel-body" width="70%"> <form role="form" method="post"> <fieldset> <div class="form-group"> <span></span>Email:<input class="form-control" placeholder="E-mail" name="email" type="email" autofocus="" required> </div> <div class="form-group"> <span>Password:</span><input class="form-control" placeholder="Password" name="password" type="password" required> </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="javascript:;" class="btn btn-sm btn-success" >Login</a> </fieldset> </form> </div> </div> </div> </td> </tr> </table> <div class="container-fluid"> <div class="login-panel panel panel-info"> <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="../new1/mail-login.html">Official Mail Login</a> </div> </div> </div> <div class="container-fluid" width="300px"> <div class="login-panel panel panel-info"> <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="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="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="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> </div> </div> <!--/span--> </div> <!--/row--> <hr> </div> <!--/.container--> <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> 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 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> <div class="row pull-left"> <ul> <a href="#">Home</a>  |  <a href="#">Sitemap</a>  |&nbsp <a href="#">History</a><br> </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--> </div> <!--/.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>

.jumbotron{ height: 400px; } .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; padding-left: 10px; } .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; } .supportLi 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 #4cdb98; background: #4cdb98; } .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; }