Ahnita/Contact details

## Contact details
<!doctype html>
<html lang ="en">
<head>
<meta charset = "utf-8">
<link href="css/contact_style.css" rel="stylesheet">
<link href="css/normalize.css" rel="stylesheet">

<title>Contact Ahn Bustamante</title>
<!--[if lt IE 9]>
<script src = "dist/html5shiv.js"></script>
<![endif]-->
</head>

<body>
<div class = "jumbotron">
	<p>
		 If you enjoy the same things as me, and you want to collaborate, please do not hesitate to contact me or connect with me using my social networks.
		</p>
	<div class = "container">
		<h1>Contact</h1>
		<h2>Email</h2>
		ahn.bustamante@gmail.com
		<br>
		<br>
		<h2>Skype</h2>
		ahntipathika
		<br>
		<br>
		<h2>Social Media</h2>
		<a href = https://instagram.com/_ahnita/>
		Instagram
		</a>
		<br>
		<a href = "https://www.pinterest.com/ahnitabonita/">Pinterest</a>
		<br>
		<a href = "https://flipboard.com/@ahnita">Flipboard</a>
		<br>
		<a href = "https://twitter.com/wahnderlush">Twitter</a>
	</div>


</div><!-- end jumbotron -->

</body>

</html>

## Contact new CSS
.nav ul li {
	display: inline-block;
	padding: 20px 10px 20px;
}

.nav ul li a {
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-family: 'Josefin Sans', serif;
	color: #FAFFFF;
	z-index: 0;
}
.nav {
	background-color: #000;
	float: right;
	width: 100%;
	position: fixed;
	z-index: 2;

}
.nav ul {
	float: right;
}

li a {
	transition: color 600ms;
}

.nav ul li a:hover {
	color: #D42163;
	text-decoration: none;
}

.jumbotron {
	background: url("../img/course.png") no-repeat center fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	background-size: 100%;
	width: 100%;
	background-color: #000;

}
.container{
	display: block;
	padding: 5px;
	font: 15px futura;
	text-align: center;
}

p {
	color: #FFF7FF;
	text-shadow: 1px 1px #4E4F4E;
	font-size: 3em;
}
h2 {
	color: #FFF7FF;
	text-shadow: 0px 1px #4E4F4E;
	font-size: 3em;
}

h2:hover {
	color: #E31D70;
	font-size: 3em;
}

h3 {
	color: #FFF7FF;
	font-size: 3em;
}
h3:hover {
	color: #E31D70;
}

html {
	background-color: #000;
	font-size: 1em;
}

body {
	background-color: #000;
}

@media screen and (max-width: 600px) {
	.img {
        display: none;
    }
    .jumbotron {
    	font-family: 0.5em #FFF7FF;
    	margin-top: 65px;
    	background-color: #000;

    }
}


## contact_style
.jumbotron{
	background-image: url("../img/course.png");
	background-size: cover;
	background-repeat: no-repeat;
	top: 0px;
	height: 700px;
	left: 0px;

}
.container{
	display: inline-block;
	position: absolute;
	padding: 8px 10px 8px 10px;
	font-family: futura;
	text-align: center;
	bottom:145px;
	right:225px;
	border: 5px;
}

p {
	display: inline-block;
	position: absolute;
	padding: 8px 10px 8px 10px;
	top: 30px;
	right: 100px;
	width: 50%;
	font: 20px futura;
	color: #FCFFFC;
	text-shadow: 0px 1px #4E4F4E;

}
h1 {
	color: #FF2E71;
	text-shadow: 0px 1px #4E4F4E;
}
h2 {
	color: #FCFFFC;
	text-shadow: 0px 1px #4E4F4E;
}
	<!doctype html>
	<html lang ="en">
	<head>
	<meta charset = "utf-8">
	<link href="css/contact_style.css" rel="stylesheet">
	<link href="css/normalize.css" rel="stylesheet">

	<title>Contact Ahn Bustamante</title>
	<!--[if lt IE 9]>
	<script src = "dist/html5shiv.js"></script>
	<![endif]-->
	</head>

	<body>
	<div class = "jumbotron">
	<p>
	If you enjoy the same things as me, and you want to collaborate, please do not hesitate to contact me or connect with me using my social networks.
	</p>
	<div class = "container">
	<h1>Contact</h1>
	<h2>Email</h2>
	ahn.bustamante@gmail.com
	<br>
	<br>
	<h2>Skype</h2>
	ahntipathika
	<br>
	<br>
	<h2>Social Media</h2>
	<a href = https://instagram.com/_ahnita/>
	Instagram
	</a>
	<br>
	<a href = "https://www.pinterest.com/ahnitabonita/">Pinterest</a>
	<br>
	<a href = "https://flipboard.com/@ahnita">Flipboard</a>
	<br>
	<a href = "https://twitter.com/wahnderlush">Twitter</a>
	</div>


	</div><!-- end jumbotron -->

	</body>

	</html>
	.nav ul li {
	display: inline-block;
	padding: 20px 10px 20px;
	}

	.nav ul li a {
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-family: 'Josefin Sans', serif;
	color: #FAFFFF;
	z-index: 0;
	}
	.nav {
	background-color: #000;
	float: right;
	width: 100%;
	position: fixed;
	z-index: 2;

	}
	.nav ul {
	float: right;
	}

	li a {
	transition: color 600ms;
	}

	.nav ul li a:hover {
	color: #D42163;
	text-decoration: none;
	}

	.jumbotron {
	background: url("../img/course.png") no-repeat center fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	background-size: 100%;
	width: 100%;
	background-color: #000;

	}
	.container{
	display: block;
	padding: 5px;
	font: 15px futura;
	text-align: center;
	}

	p {
	color: #FFF7FF;
	text-shadow: 1px 1px #4E4F4E;
	font-size: 3em;
	}
	h2 {
	color: #FFF7FF;
	text-shadow: 0px 1px #4E4F4E;
	font-size: 3em;
	}

	h2:hover {
	color: #E31D70;
	font-size: 3em;
	}

	h3 {
	color: #FFF7FF;
	font-size: 3em;
	}
	h3:hover {
	color: #E31D70;
	}

	html {
	background-color: #000;
	font-size: 1em;
	}

	body {
	background-color: #000;
	}

	@media screen and (max-width: 600px) {
	.img {
	display: none;
	}
	.jumbotron {
	font-family: 0.5em #FFF7FF;
	margin-top: 65px;
	background-color: #000;

	}
	}
	.jumbotron{
	background-image: url("../img/course.png");
	background-size: cover;
	background-repeat: no-repeat;
	top: 0px;
	height: 700px;
	left: 0px;

	}
	.container{
	display: inline-block;
	position: absolute;
	padding: 8px 10px 8px 10px;
	font-family: futura;
	text-align: center;
	bottom:145px;
	right:225px;
	border: 5px;
	}

	p {
	display: inline-block;
	position: absolute;
	padding: 8px 10px 8px 10px;
	top: 30px;
	right: 100px;
	width: 50%;
	font: 20px futura;
	color: #FCFFFC;
	text-shadow: 0px 1px #4E4F4E;

	}
	h1 {
	color: #FF2E71;
	text-shadow: 0px 1px #4E4F4E;
	}
	h2 {
	color: #FCFFFC;
	text-shadow: 0px 1px #4E4F4E;
	}