ariestiyansyah/gist:364b2e67cef2367d3843

## gistfile1.html
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta name="description" content="">
		<meta name="author" content="">
      	 <!-- fonts file -->
         <link href='http://fonts.googleapis.com/css?family=Roboto:500,100' rel='stylesheet' type='text/css'>

		 <!-- HTML5 shim, for IE6-8 support of HTML5 elements. All other JS at the end of file. -->
        <!--[if lt IE 9]>
          <script src="js/html5shiv.js"></script>
        <![endif]-->

	</head>

	<body data-spy="scroll" data-offset="0" data-target="#band">
        <div id="wrapper">
        	<div id="band">
				<div class="logo"><img src="#" alt="logo"></div>
				<a href="#about" class="smoothscroll nav-band"> Button  </a>
          <a href="#" target="_top" class="smoothscroll button button-contact">Button</a>
			</div>

			<div id="menu">
				<div id="img-menu"><img src="#" alt="#"></div>
			</div>

			<div id="about">
				<div id="me"><img src="#" alt="#"></div>
				<div id="text-profile"><img src="#" alt="#"></div>
				<div class="about">
					<p>#MozBelajar.
                      <br>14 Juni 2014</p>
				</div>
				<a href="#" class="button read-more">Button Read More</a>
			</div>

			<div id="copyright">
				<p>&copy; Copyright 2014 <br>
                  Made with ♥ </p>
			</div>

  		</div>

      <style>
body {
	background-color: #e9967a !important;
	color: #fff5ee !important;
	height: 100%;
	width: 100%;
	font-family: 'Roboto', sans-serif;
}

a {
	color: #ff6347;
	text-decoration: none;
	-moz-transition: color .2s ease-in-out;
	-webkit-transition: color .2s ease-in-out;
	-o-transition: color .2s ease-in-out;
	-ms-transition: color .2s ease-in-out;
	transition: color .2s ease-in-out;
}

a:hover {
	color: #666666 !important;
}

a img {
	border: 0;
}

#band{
	height:75px;
	background-color: #eeeeee;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 10000;
	cursor: default;
	width:100%;
}

.logo {
	position: absolute;
	left: 50px;
	top: 12px;
}

.button {
	position: relative;
	display: inline-block;
	color: #fff;
	text-decoration: none;
	border: 0;
	outline: 0;
	cursor: pointer;
	background: #ff6347;
	padding: 10px;
	-moz-transition: background-color .2s ease-in-out;
	-webkit-transition: background-color .2s ease-in-out;
	-o-transition: background-color .2s ease-in-out;
	-ms-transition: background-color .2s ease-in-out;
	transition: background-color .2s ease-in-out;
}

.button:hover {
	color: #fff !important;
	background: #e75442 !important;
}

.button-contact {
	position: absolute;
	left: 88%;
	top: 16px;
}

.nav-band {
	position: absolute;
	left: 80%;
	top: 25px;
}

#menu {
	width:100%;
	position: relative;
	text-align: center;
}

#img-menu {
	margin-top: 15em;
	margin-bottom: 10em;
}

.kelimutu {
	font-family: 'black_jack';
	font-size: 3rem;
}

#about {
/*	height: 630px;*/
	width:100%;
	text-align: center;
	background: #fff;
	position: relative;
}

#me {
	width: 100%;
	display: inline-block;
	margin-top: 13em;
	margin-bottom: 0;
	margin-left: -30em;
	margin-right: 0;
}

#text-profile {
	position: relative;
	top: -13em;
	right: 26em;
	text-align: right !important;
}

.about {
	color: #696969;
	font-size: 18px;
	text-align: left; !important;
	position: relative;
	top: -12em;
	padding-left: 36em;
}

.read-more {
	position: relative;
	top: -13em;
	margin-left: 12em;
}

#contact {
/*	height: 630px;*/
	background: #eeeeee;
	width:100%;
	text-align: center;
}

#copyright p{
	font-family: 'Roboto', sans-serif;
	font-size: 12px;
	text-align: center;
	color:#fff;
}
      </style>
	</body>

</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title></title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta name="description" content="">
	<meta name="author" content="">
	<!-- fonts file -->
	<link href='http://fonts.googleapis.com/css?family=Roboto:500,100' rel='stylesheet' type='text/css'>

	<!-- HTML5 shim, for IE6-8 support of HTML5 elements. All other JS at the end of file. -->
	<!--[if lt IE 9]>
	<script src="js/html5shiv.js"></script>
	<![endif]-->

	</head>

	<body data-spy="scroll" data-offset="0" data-target="#band">
	<div id="wrapper">
	<div id="band">
	<div class="logo"><img src="#" alt="logo"></div>
	<a href="#about" class="smoothscroll nav-band"> Button </a>
	<a href="#" target="_top" class="smoothscroll button button-contact">Button</a>
	</div>

	<div id="menu">
	<div id="img-menu"><img src="#" alt="#"></div>
	</div>

	<div id="about">
	<div id="me"><img src="#" alt="#"></div>
	<div id="text-profile"><img src="#" alt="#"></div>
	<div class="about">
	<p>#MozBelajar.
	<br>14 Juni 2014</p>
	</div>
	<a href="#" class="button read-more">Button Read More</a>
	</div>

	<div id="copyright">
	<p>© Copyright 2014 <br>
	Made with ♥ </p>
	</div>

	</div>

	<style>
	body {
	background-color: #e9967a !important;
	color: #fff5ee !important;
	height: 100%;
	width: 100%;
	font-family: 'Roboto', sans-serif;
	}

	a {
	color: #ff6347;
	text-decoration: none;
	-moz-transition: color .2s ease-in-out;
	-webkit-transition: color .2s ease-in-out;
	-o-transition: color .2s ease-in-out;
	-ms-transition: color .2s ease-in-out;
	transition: color .2s ease-in-out;
	}

	a:hover {
	color: #666666 !important;
	}

	a img {
	border: 0;
	}

	#band{
	height:75px;
	background-color: #eeeeee;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 10000;
	cursor: default;
	width:100%;
	}

	.logo {
	position: absolute;
	left: 50px;
	top: 12px;
	}

	.button {
	position: relative;
	display: inline-block;
	color: #fff;
	text-decoration: none;
	border: 0;
	outline: 0;
	cursor: pointer;
	background: #ff6347;
	padding: 10px;
	-moz-transition: background-color .2s ease-in-out;
	-webkit-transition: background-color .2s ease-in-out;
	-o-transition: background-color .2s ease-in-out;
	-ms-transition: background-color .2s ease-in-out;
	transition: background-color .2s ease-in-out;
	}

	.button:hover {
	color: #fff !important;
	background: #e75442 !important;
	}

	.button-contact {
	position: absolute;
	left: 88%;
	top: 16px;
	}

	.nav-band {
	position: absolute;
	left: 80%;
	top: 25px;
	}

	#menu {
	width:100%;
	position: relative;
	text-align: center;
	}

	#img-menu {
	margin-top: 15em;
	margin-bottom: 10em;
	}

	.kelimutu {
	font-family: 'black_jack';
	font-size: 3rem;
	}

	#about {
	/* height: 630px;*/
	width:100%;
	text-align: center;
	background: #fff;
	position: relative;
	}

	#me {
	width: 100%;
	display: inline-block;
	margin-top: 13em;
	margin-bottom: 0;
	margin-left: -30em;
	margin-right: 0;
	}

	#text-profile {
	position: relative;
	top: -13em;
	right: 26em;
	text-align: right !important;
	}

	.about {
	color: #696969;
	font-size: 18px;
	text-align: left; !important;
	position: relative;
	top: -12em;
	padding-left: 36em;
	}

	.read-more {
	position: relative;
	top: -13em;
	margin-left: 12em;
	}

	#contact {
	/* height: 630px;*/
	background: #eeeeee;
	width:100%;
	text-align: center;
	}

	#copyright p{
	font-family: 'Roboto', sans-serif;
	font-size: 12px;
	text-align: center;
	color:#fff;
	}
	</style>
	</body>

	</html>