Contact form that can be placed anywhere on a page
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Template</title>
<style>
body {
margin: 0;
padding: 0;
}
#form {
border: 1px solid saddlebrown;
width: 400px;
background: #66b2b2;
}
#logo {
width: 400px;
margin-bottom: none;
}
#border-line {
width: 96%;
margin: 0;
padding: 0;
border: 8px solid #66b2b2;
}
hr {
border: .5px solid #66b2b2;
width: 85%;
}
#black {
padding: 10px 0;
background-color: saddlebrown;
color: white;
}
#right {
margin-left: 150px;
height: 50px;
}
#location {
margin-left: 5px;
}
#facebook {
margin-left: 10px;
}
#left {
float: left;
margin-left: 10%;
}
#black
</style>
</head>
<body>
<div id="form">
<img src="geeklyroodBanner.jpg" id="logo">
<hr id="border-line">
<div id="black">
<div id="left">
<a href="https://goo.gl/maps/RKWeDL9Br2B2" target="_blank"><img id="location" src="Location.png" style="margin-top: 10px; margin-bottom: 10px"></a>
</div>
<div id="right">
<p style="margin-bottom: 5px; margin-top: 10px;">705 Howard St</p>
<p style="margin-top: 0">Delta, Colorado 81416</p>
</div>
<hr>
<div id="left">
<a href="https://www.twitch.tv/geeklyrood" target="_blank"><img id="facebook" src="Facebook.png" style="margin-top: 10px;"></a>
</div>
<div id="right">
<p style="margin-top: 30px; margin-bottom: 5px">@Geeklyrood</p>
</div>
<hr>
<div id="left">
<a href="https://goo.gl/maps/RKWeDL9Br2B2" target="_blank"><img id="email" src="email.png" style="margin-top: 20px;"></a>
</div>
<div id="right">
<p style="margin-top: 30px; margin-bottom: 5px">Geeklyrood@gmail.com</p>
</div>
<hr><div id="left">
<a href="tel:715-680-0529"><img id="cellphone" src="cellphone.png" style="margin-top: 10px;"></a>
</div>
<div id="right">
<p style="margin-bottom: 5px; margin-top: 20px;">Cell: (715) 680-0529</p>
<p style="margin-top: 0">Office: (715) 680-0528</p>
</div>
<hr style="border-color: saddlebrown">
</div>
</div>
</body>
</html>