Report Outage & Emergency

In this example below you will see how to do a Report Outage & Emergency with some HTML / CSS and Javascript

Design mock-up of an adaptive mobile page for reporting outages and emergencies.

Thumbnail
This awesome code was written by sheridanms, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright sheridanms ©

Technologies

  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Report Outage & Emergency</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <!doctype html>
<html>
  
  <head>
    <script src="https://app.divshot.com/js/jquery.min.js"></script>
    <script src="https://app.divshot.com/js/bootstrap.min.js"></script>
    <title>Mobile Homepage</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
    <link rel="stylesheet" href="https://app.divshot.com/css/bootstrap.css">
    <link rel="stylesheet" href="https://app.divshot.com/css/bootstrap-responsive.css"> 
  </head>
  
  <body>
    <div class="container">
      <div class="row">
        <div class="span4">
          <img class="pull-left logo" src="" width="140"> 
        </div>
        <div class="span4">
          <p class="pull-right">
            <b>Contact Us</b>
            <br>334-3434 (local)
            <br>1-800-818-3436
            <br><a href="#">Online</a> | <a href="#">In-person</a> 
          </p>
        </div><!--/.span4-->
        <div class="pull-right span4" id="searchInput">
              <div class="input-append" style="width:90%;">
                <input type="text" placeholder="Search" style="width:90%;">
                <button class="btn" type="button"><i class="icon-search"></i></button>
              </div><!--/.input-append -->
        </div>
      </div>
      <div class="row-fluid">
        <div class="span12">
          <h1><small>Report Outages &amp; Emergencies</small></h1>
          <a class="btn btn-block" href="#">Electric Outage</a>
          <a class="btn btn-block" href="#">Gas Leak</a>
          <a class="btn btn-block" href="#">Water/Wastewater Leak</a>
          <a class="btn btn-block" href="#">GRUCom Internet</a>
          <a class="btn btn-block" href="#">Streetlight Outage</a>
          <a class="btn btn-block" href="#">Utility Theft</a>          
          <hr>
        </div><!--/.span12-->
      </div><!--/.row-fluid -->
      
      <div class="row-fluid">
        <div class="span12">
          <p class="text-info">You are viewing the GRU mobile site.</p>
          <a class="btn btn-block" href="#"><span class="btn-label">View Full Site</span></a> 
        </div><!--/.span12-->
      </div><!--/.row-fluid -->
      
      <div class="row-fluid">
        <div class="span6">
          <p class="muted">© 2013 Copyright GRU. All Rights Reserved.</p>
        </div><!--/.span6-->
        <div class="span6">
           <p>
            <a href="#">Disclaimer</a> |
            <a href="#">Privacy Policy</a> |
            <a href="#">Site Map</a> |
            <a href="#">Contact Us</a> 
          </p>
        </div><!--/.span6-->
      </div><!--/.row-fluid -->
      
    </div>
  </body>
</html>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/sheridanms/report-outage-andamp-emergency-utaxL */
.logo {
  margin-top: 1em;
}

Comments