Feature/scroll by delta

.gitignore

@@ -0,0 +1,4 @@
+# MAC OS
+*.DS_Store
+./portfolios/
+.DS_Store

README.md

@@ -12,3 +12,24 @@
 6. index.html 을 각자 사용하고 있는 IDE를 이용해서 편집하며 실습에 참여합니다.
 7. 각 실습단계 종료시 작업한 index.html 파일을 원격저장소로 **Commit** 합니다.
 8. Pull Request를 생성하여 오리지널 저장소로 작업한 파일을 반영합니다.
+
+## Portfolios
+
+1. 이승하 [http://lsh41319kr.github.io/](http://lsh41319kr.github.io/) [@github](https://github.com/lsh41319kr/lsh41319kr.github.io)
+1. 한은진 [https://jinne202.github.io/index](https://jinne202.github.io/index) [@github](https://github.com/jinne202/jinne202.github.io)
+1. 남현우 [https://nam-hyun-woo-korea.github.io/portfolio/](https://nam-hyun-woo-korea.github.io/portfolio/) [@github](https://github.com/nam-hyun-woo-korea/nam-hyun-woo-korea.github.io)
+1. 정하은 [https://haney1126.github.io](https://haney1126.github.io) [@github](https://github.com/haney1126/haney1126.github.io)
+1. 조현지 [https://johyunji.github.io/](https://johyunji.github.io/) [@github](https://github.com/johyunji/johyunji.github.io)
+1. 안가은 [https://uing2938.github.io/](https://uing2938.github.io/) [@github](https://github.com/uing2938/uing2938.github.io)
+1. 노예슬 [https://nohyeseul.github.io/](https://nohyeseul.github.io/) [@github](https://github.com/nohyeseul/nohyeseul.github.io)
+1. 남윤진 [https://yjnam99.github.io](https://yjnam99.github.io) [@github](https://github.com/yjnam99/yjnam99.github.io)
+1. 박소현 [https://soromi.github.io/](https://soromi.github.io/) [@github](https://github.com/soromi/soromi.github.io)
+1. 최수림 [https://choisoorim.github.io/](https://choisoorim.github.io/) [@github](https://github.com/choisoorim/choisoorim.github.io)
+1. 김수연 [https://sy03549.github.io/](https://sy03549.github.io/) [@github](https://github.com/sy03549/sy03549.github.io)
+1. 허승찬 [https://chanist96.github.io/](https://chanist96.github.io/) [@github](https://github.com/chanist96/chanist96.github.io)
+1. 김다은 [https://honneythiefd.github.io/](https://honneythiefd.github.io/) [@github](https://github.com/honneythiefd/honneythiefd.github.io)
+1. 노주훈 [https://picfox.github.io/](https://picfox.github.io/) [@github](https://github.com/picfox/picfox.github.io)
+1. 조문배 [https://joemoonbae.github.io/](https://joemoonbae.github.io/) [@github](https://github.com/joemoonbae/joemoonbae.github.io)
+1. 김지현 [https://kkkkkkjh.github.io/index.html](https://kkkkkkjh.github.io/index.html) [@github](https://github.com/kkkkkkjh/kkkkkkjh.github.io)
+1. 이우형 [https://anthownee.github.io](https://anthownee.github.io) [@github](https://github.com/anthownee/anthownee.github.io)
+

portfolios/21561116/css/style.css

@@ -0,0 +1,147 @@
+@charset "utf-8";
+/* Webfont */
+@font-face {
+    font-family: 'Circular';
+    src: url('../font/Circular-Light.eot'); /* IE9 Compat Modes */
+    src: url('../font/Circular-Light.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+         url('../font/Circular-Light.woff') format('woff'), /* Modern Browsers */
+         url('../font/Circular-Light.ttf') format('truetype'); /* Safari, Android, iOS */
+	font-weight: 300;
+}
+@font-face {
+    font-family: 'Circular';
+    src: url('../font/circular-medium.eot');
+    src: url('../font/circular-medium.eot?#iefix') format('embedded-opentype'),
+         url('../font/circular-medium.woff') format('woff'),
+         url('../font/circular-medium.ttf') format('truetype');
+	font-weight: 500;
+}
+@font-face {
+    font-family: 'Circular';
+    src: url('../font/circular-bold.eot');
+    src: url('../font/circular-bold.eot?#iefix') format('embedded-opentype'),
+         url('../font/circular-bold.woff') format('woff'),
+         url('../font/circular-bold.ttf') format('truetype');
+	font-weight: 700;
+}
+/* reset css */
+* {
+	outline: none;
+}
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed, 
+figure, figcaption, footer, header, hgroup, 
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 100%;
+	font: inherit;
+	vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section {
+	display: block;
+}
+body {
+	height: 100%;
+	line-height: 1;
+	font-family: 'Circular', sans-serif;
+	position: relative;
+	overflow-x: hidden!important;
+}
+ol, ul {
+	list-style: none;
+}
+blockquote, q {
+	quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
+}
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}
+img {
+	width: 100%;
+	vertical-align: middle;
+}
+a {
+	text-decoration: none;
+	transition: all 0.3s ease;
+}
+/* section */
+section .wrap {
+	display: table;
+	width: 100%;
+	height: 100%;
+}
+section .wrap .content {
+	display: table-cell;
+	vertical-align: middle;
+}
+/* main */
+#section1 {
+	background: linear-gradient(to top right,rgb(178, 255, 251),#5226f8);
+}
+#section1 .wrap .content {
+	width: 60%;
+	padding: 40px;
+}
+#section1 .wrap .content h1 span {
+	display: block;
+	color: #fff;
+}
+#section1 .wrap .content h1 span:first-child {
+	font-size: 60px;
+	letter-spacing: 0.05em;
+	position: relative;
+	padding-left: 440px;
+}
+#section1 .wrap .content h1 span:first-child:before {
+	content: "";
+	display: block;
+	width: 400px;
+	height: 4px;
+	background: #fff;
+	position: absolute;
+	top: 28px;
+	left: 0;
+}
+#section1 .wrap .content h1 span:last-child {
+    font-size: 120px;
+    font-weight: 700;
+}
+#section1 .wrap .content h2 {
+	color: #fff;
+	font-size: 20px;
+	font-weight: 300;
+	letter-spacing: 0.02em;
+	margin: 40px 0 0;
+}
+#section1 .wrap .covers {
+	width: 100%;
+	height: 100%;
+	background: #181717;
+	overflow: hidden;
+}
+#section1 .wrap .covers ul li {
+	float: left;
+	width: 25%;
+}
+#section1 .wrap .covers ul li:nth-child(3n) {
+	width: 50%;
+}

portfolios/21561116/index.html

@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+	<meta charset="utf-8" />
+	<title></title>
+	<link href="css/style.css" rel="stylesheet" type="text/css" />
+	<link href="css/waves.min.css" rel="stylesheet" type="text/css" />
+	<script src="js/jquery-1.8.3.min.js" type="text/javascript"></script>
+	<script src="js/jquery.scrollify.min.js" type="text/javascript"></script>
+	<script type="text/javascript" src="js/waves.min.js"></script>
+	<script type="text/javascript">
+		$(document).ready(function() {
+			$.scrollify({
+				section : "section",
+				standardScrollElements: "#top5"
+			});
+			Waves.init();
+			Waves.attach('#waves', 'waves-block');
+		});
+	</script>
+</head>
+<body>
+	<section id="section1" data-section-name="main">
+		<div class="wrap">
+			<div class="content" id="waves">
+				<h1>
+					<span>2016</span>
+					<span>Top<br />Summer<br />Songs</span>
+				</h1>
+				<h2>Relive the moments and the music that made summer to remember.</h2>
+			</div>
+			<div class="covers">
+				<ul>
+					<li><img src="img/default.jpg" width="100%" /></li>
+					<li><img src="img/default.jpg" width="100%" /></li>
+					<li><img src="img/default.jpg" width="100%" /></li>
+					<li><img src="img/default.jpg" width="100%" /></li>
+					<li><img src="img/default.jpg" width="100%" /></li>
+				</ul>
+			</div>
+		</div>
+	</section>
+	<section id="section2" data-section-name="top5">
+	</section>
+</body>
+</html>