Skip to content

Instantly share code, notes, and snippets.

@ademsas

ademsas/contact.html

Last active February 2, 2016 04:40
Show Gist options
  • Save ademsas/7db487d233a5822e3b8d to your computer and use it in GitHub Desktop.
Save ademsas/7db487d233a5822e3b8d to your computer and use it in GitHub Desktop.
Download ZIP
Contact Page 1.5
Raw
contact.html
<!DOCTYPE html>
<html>
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Raleway">
</head>
<body>
<div class="contact">
<h1>Contact</h1>
</div>
<div id="map"></div>
<h2 class="hq"><span class ="glyphicon glyphicon-map-marker"></span>&nbsp;Headquarters:</h2>
<script>
function initMap() {
var mapDiv = document.getElementById('map');
var map = new google.maps.Map(mapDiv, {
center: {lat: 34.430325, lng: -119.720748},
zoom: 13
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?callback=initMap"
async defer></script>
<div class="phone">
<h2><span class="glyphicon glyphicon-phone-alt"></span>&nbsp;Phone: 805-637-2065</h1>
</div>
<div class="email">
<h2><span class="glyphicon glyphicon-envelope"></span>&nbsp;Email: <a href="mailto:[email protected]">[email protected]</a></h2>
</div>
<div class="address">
<h2><span class="glyphicon glyphicon-home"></span>&nbsp;Address:<br>235 W Quinto St Apt 3</br><br>Santa Barbara, CA 93103</br></h2>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>
Raw
contact_style.css
* {
box-sizing: border-box; }
body{
background: #649173; /* fallback for old browsers */
background: -webkit-linear-gradient(to left, #649173 , #DBD5A4);
background: linear-gradient(to left, #649173 , #DBD5A4);
font-family: 'Raleway', sans-serif;
color: white;
opacity: 0.8;
}
.jumbotron {
background-image: url("../img/mountains.jpg");
background-size: cover;
opacity: 1;
text-align: center;
}
.jumbotron p {
color: white;
font-family: 'Raleway', sans-serif;
text-shadow: 6px 6px 0px rgba(0,0,0,0.2);
}
.jumbotron h1 {
color: white;
font-family: 'Raleway', sans-serif;
text-shadow: 6px 6px 0px rgba(0,0,0,0.2);
}
.nav {
background: #649173;
background: -webkit-linear-gradient(to left, #649173 , #DBD5A4);
background: linear-gradient(to left, #649173 , #DBD5A4);
position: fixed;
width: 100%;
top: 0;
}
.nav ul {
float: right;
}
.nav ul li {
font-family: 'Raleway', sans-serif;
display: inline-block;
text-transform: uppercase;
letter-spacing: 0.06em;
padding: 20px 10px 5px;
}
.nav ul li a {
color: white;
}
.col-md-4 {
color: white;
font-family: 'Raleway', sans-serif;
}
.nav a:hover {
color: #ff0;
text-decoration: none;
}
.nav a {
-webkit-transition: color 800ms;
}
/**** Contact Page ****/
#map {
width: 500px;
height: 500px;
position: absolute;
right: 40px
top: 80px;
opacity: 0.8;
}
body {
background: -webkit-linear-gradient(to left, #649173 , #DBD5A4);
background: linear-gradient(to left, #649173 , #DBD5A4);
font-family: 'Raleway', sans-serif;
color: white;
opacity: 0.8;
}
.contact h1 {
font-family: 'Raleway', sans-serif;
color: #FFF;
text-align: center;
font-size: 10em;
font-weight: 100;
font-weight: bold;
text-transform: uppercase;
margin-bottom: 40px;
}
h2 {
font-family: 'Raleway', sans-serif;
color: #FFF;
text-align: center;
font-size: 2em;
font-weight: 100;
}
h2 span:hover {
color: #ff0;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment