Skip to content
Permalink
67ed4e778e
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Go to file
 
 
Cannot retrieve contributors at this time
179 lines (146 sloc) 4.97 KB
.hello {
position: absolute;
top: 20px;
right: 0;
bottom: 0;
left: 0;
}
<!DOCTYPE html>
<html>
<body style="height:2500px;">
<!--This is where we shall add the buttons which include the back button, the add button and the other button -->
<!--This will allow us to add an image as the button rather than relying on the text -->
<p>
<!-- Insert the html links to the pages that will do these operations-->
<!--This is for the hazzard button -->
<a href="http://www.w3schools.com">
<img src="http://vignette4.wikia.nocookie.net/secretlifeofpets/images/c/c9/Yellow-warning-sign.gif/revision/latest?cb=20160719030606" alt="Hazzard button" style="float:right;width:42px;height:42px;">
<!--This if for the Edit button-->
<a href="https://www.youtube.com/" >
<img src="https://upload.wikimedia.org/wikipedia/commons/7/7d/B_plus.svg" alt= "Edit button" style="float:right;width:42px;height:42px;">
<!--This is for back button-->
<a href="https://www.google.com/" >
<img src="https://upload.wikimedia.org/wikipedia/commons/9/96/Singapore_Road_Signs_-_Regulatory_Sign_-_Ahead_Only.svg" alt= "go back" style="float:left;width:42px;height:42px;">
</a>
</p>
<!--This is where we will insert the image of the well -->
<p>
<img src="https://image.shutterstock.com/z/stock-vector-illustrator-of-well-288572600.jpg" alt="W3Schools.com" width="100%" height="100"> </p>
<p>
<!--We will place the side by side text here -->
<div style='float:left; width:45%'>
<b>Date Completed: </b>
<p> Insert date completed here <p>
<b>Permit Number: </b>
<p>Insert Permit Number here </p>
<b>State Well Number: </b>
<p> Insert well number here</p>
<b> Signature </b>
<p>Name of the person here </p>
<img src="https://upload.wikimedia.org/wikipedia/commons/5/55/George_IV_Signature.svg" height= "50" width="50" />
<p> </p>
<b> Owner </b>
<p>University of Connecticut </p>
<b> Location </b>
<p> Mansfield CT </p>
</div>
<div style='float:left; width:50%; margin-left:30px'>
<b> Date of Report: </b>
<p> Insert that here </p>
<b> Registrant Number: </b>
<p> Insert that here </p>
<b> Other number: </b>
<p> Insert that here: <p>
</div>
</p>
<div id="map" style="width:100%;height:400px;background:yellow"></div>
<script>
function myMap() {
var mapOptions = {
center: new google.maps.LatLng(41.5, -72.5),
zoom: 10,
mapTypeId: google.maps.MapTypeId.HYBRID
}
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBu-916DdpKAjTmJNIgngS6HL_kDIKU0aU&callback=myMap"></script>
<p> </p>
<b>Location Relative To Landmarks</b>
<p> Insert description here </p>
<!--We will place the side by side text here -->
<div style='float:left; width:45%'>
<b>Use : </b>
<p> where to use </p>
</div>
<div style='float:left; width:50%; margin-left:30px'>
<b>Drilling Equipment: </b>
<p> Write what equipment was used</p>
</div>
</p>
<h1> Casing details </h1>
<center>
<p> <b> Length: </b> insert length here</p>
<p> <b> Diameter: </b> insert here</p>
<p> <b> Weight per foot: </b> insert here</p>
<p> <b> Drive Shoe: </b> insert here</p>
<p> <b> Threaded: </b> insert here</p>
<p> <b> Was Casing Grouted: </b> insert here</p>
</center>
<h1> Yeild Test </h1>
<center>
<p> <b> Methods: </b> insert here</p>
<p> <b> Duration: </b> insert here</p>
<p> <b> Yield: </b> insert here</p>
<p>
Write down the yeild here with same format as above
</p>
</center>
<h1> Water Level</h1>
<center>
<p> <b> From Land to Surface: </b> insert here</p>
<p> <b> During Yeild Test: </b> insert here</p>
<p> <b> Depth of Completed Well: </b> insert here</p>
</center>
<h1> Screen Details </h1>
<center>
<p> <b> Make: </b> insert here</p>
<p> <b> Length Open To Aquilfier: </b> insert here</p>
<p> <b> Slot Size: </b> insert here</p>
<p> <b> Diameter: </b> insert here</p>
<p> <b> Gravel: </b> insert here</p>
<p> <b> Diameter Including Gravel Pack: </b> insert here</p>
<p> <b> Gravel Size: </b> insert here</p>
<p> <b> Gravel Pack Location: </b> insert here</p>
</center>
<h1> Depth from land to surface </h1>
<center>
<p> We must find a way to iterate based on the value in the submit form </p>
</center>
</body>
</html>
.hello .button-say-hello {
position: absolute;
display: block;
font-size: 120%;
bottom: 100px;
right: 50%;
-webkit-transform: translate(50%,0);
transform: translate(50%,0);
-webkit-appearance: none;
border-radius: 2px;
background: #efefef;
color: #666666;
padding: 10px;
width: 300px;
text-align: center;
text-decoration: none;
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.1);
}
.hello .button-say-hello.Tappable-active {
background: #e6e6e6;
color: #333333;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
-webkit-transform: translate(50%, 1px);
transform: translate(50%, 1px);
}