ollac21/app.js

## app.js
$(function () { // wait for document ready
		// init
		var controller = new ScrollMagic.Controller({
			globalSceneOptions: {
				triggerHook: 'onLeave'
			}
		});

		// get all slides
		var slides = document.querySelectorAll("section.panel");

		// create scene for every slide
		for (var i=0; i<slides.length; i++) {
			new ScrollMagic.Scene({
					triggerElement: slides[i]
				})
				.setPin(slides[i])
				.addIndicators() // add indicators (requires plugin)
				.addTo(controller);
		}
	});

## index.html
<!DOCTYPE html>

<head>

	<!-- Latest compiled and minified CSS -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

	<!-- Optional theme -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

	<!-- Home-made CSS-->
	<link rel="stylesheet" href="css/stylesheet.css" >

	<!-- font -->
	<link href='https://fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet' type='text/css'>


</head>

<body>
	<div class="header">
		<div class="container">
			<ul class="nav nav-tabs">
			  <li role="presentation" class="active"><a href="#">Home</a></li>
			  <li role="presentation"><a href="#">MD</a></li>
			  <li role="presentation"><a href="#">Dev</a></li>
			  <li role="presentation"><a href="#">Other Stuff</a></li>
			</ul>
		</div>
	</div>

	<section class="panel intro">

		<div class="main">
			<div class="container">
				<div class="row">
					<div class="col-md-8" text-align="right">
						<ul>
							<li><p>Hello !</p></li>
							<li><p>My name is Olivier</p></li>
							<li><p>And one day...</p></li>
							<li><p>I'm gonna be...</p></li>
							<li><p>An Anesthesiologist</p></li>
							<li><p>A real Web Dev</p></li>
							<li><p>And I'll do some other cool stuff too...</p></li>
						</ul>
					</div>
					<div class="col-md-4">
						<img src="img/boy.png">
					</div>
				</div>
			</div>
		</div>

	</section>

	<section class="panel anesthesia">
		<div class="title">
				<h1>1</h1>
				<img src="img/hospital11.svg">
				<h2>Actually I'm an anesthesiology resident</h2>
		</div>
		<div class="explanation">
			<p>I'm an anesthesiology resident at Sherbrooke University with still a few years left to do. I live in the intensive care unit and I do some research</p>
		</div>
	</section>

	<section class="panel web-dev">
		<div class="title">
				<h1>2</h1>
				<img src="img/web.jpg">
				<h2>And I'm learning to code</h2>
		</div>
		<div class="explanation">
			<p>I've got good knowledge of HTML, CSS, Jquery, AngularJS and Javascript. Down there you can see some of the projects I've worked on.</p>
		</div>
		<div class="project">
				<div class="row">
					<div class="col-md-4">
						<img src="img/project.png">
						<img src="img/project.png">
					</div>
					<div class="col-md-4">
						<img src="img/project.png">
						<img src="img/project.png">
					</div>
					<div class="col-md-4"></div>
				</div>
		</div>
	</section>

	<section class="panel bordeaux">
		<b>FOUR</b>
	</section>


	<!-- Latest compiled and minified JavaScript -->
	<script src="https://s3.amazonaws.com/codecademy-content/projects/jquery.min.js"></script>

	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

	<!-- Scroll magic-->
	<script src="js/scrollmagic/minified/ScrollMagic.min.js"></script>
	<script src="js/scrollmagic/minified/plugins/debug.addIndicators.min.js"></script>

	<!-- Home made JS-->
	<script rel="javascript" src="js/app.js"></script>

</body>

## stylesheet.css
body, panel, section, html {
    height:100%;
    width:100%;
    margin:0px;
    padding:0px;
    font-family: 'Droid Sans', sans-serif;
}

.container {
    width:100%;
}

/*header*/
.header {
    position:fixed;
    height:auto;
    background-color:white;
    border-bottom:none;
    width:100%;
    z-index:1000;
}

.header ul {
    list-style-type:none;
}

.header ul li {
    color:#fff;
}

/**/
.panel {
    width:100%;
    height:100%;
    margin:0px;
    padding:0px;

}

/*first panel*/
.intro {
	background:white
}

.intro .main {
    background-color:transparent;
    margin-top:100px;
    position:relative;
}

.main ul {
    list-style-type:none;
    text-align:right;
    padding-right:20px;
}

.main ul li:nth-child(1){
    font-size:74px;
}

.main ul li:nth-child(2){
    font-size:25px;
}

.main ul li:nth-child(3){
    font-size:33px;
}

.main ul li:nth-child(4){
    font-size:31px;
}

.main ul li:nth-child(5){
    font-size:24px;
}

.main ul li:nth-child(6){
    font-size:31px;
}

.main ul li:nth-child(7){
    font-size:12.4px;
}

.main img {
    height:300px;
    margin-top:80px;
}


/*second panel*/
.anesthesia, .web-dev {
    width:100%;
    margin-bottom:400px;
    color:white;
}

.title {
    background-size:cover;
    text-align:center;
    width:100%;
    background:rgb(4, 247, 153);
}

.title h1, .title h2 {
    padding:40px 0 40px;
    color:white;
    text-align:center;
}

.title img {
    display:block;
    margin:auto;
    height:200px;
    width:auto;
    opacity:0.6;
}

.explanation {
    width:100%;
    background-color:white;
    color:black;
    text-align:center;
    padding:10px;
}

.explanation p {
    margin:20px 300px 800px 300px;
    font-size:22px;
}

.web-dev .title {
    background-color:rgb(182, 180, 183);
}

.project {
    background-color:white;
    padding-bottom:10px;
}
	$(function () { // wait for document ready
	// init
	var controller = new ScrollMagic.Controller({
	globalSceneOptions: {
	triggerHook: 'onLeave'
	}
	});

	// get all slides
	var slides = document.querySelectorAll("section.panel");

	// create scene for every slide
	for (var i=0; i<slides.length; i++) {
	new ScrollMagic.Scene({
	triggerElement: slides[i]
	})
	.setPin(slides[i])
	.addIndicators() // add indicators (requires plugin)
	.addTo(controller);
	}
	});
	<!DOCTYPE html>

	<head>

	<!-- Latest compiled and minified CSS -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

	<!-- Optional theme -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

	<!-- Home-made CSS-->
	<link rel="stylesheet" href="css/stylesheet.css" >

	<!-- font -->
	<link href='https://fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet' type='text/css'>


	</head>

	<body>
	<div class="header">
	<div class="container">
	<ul class="nav nav-tabs">
	<li role="presentation" class="active"><a href="#">Home</a></li>
	<li role="presentation"><a href="#">MD</a></li>
	<li role="presentation"><a href="#">Dev</a></li>
	<li role="presentation"><a href="#">Other Stuff</a></li>
	</ul>
	</div>
	</div>

	<section class="panel intro">

	<div class="main">
	<div class="container">
	<div class="row">
	<div class="col-md-8" text-align="right">
	<ul>
	<li><p>Hello !</p></li>
	<li><p>My name is Olivier</p></li>
	<li><p>And one day...</p></li>
	<li><p>I'm gonna be...</p></li>
	<li><p>An Anesthesiologist</p></li>
	<li><p>A real Web Dev</p></li>
	<li><p>And I'll do some other cool stuff too...</p></li>
	</ul>
	</div>
	<div class="col-md-4">
	<img src="img/boy.png">
	</div>
	</div>
	</div>
	</div>

	</section>

	<section class="panel anesthesia">
	<div class="title">
	<h1>1</h1>
	<img src="img/hospital11.svg">
	<h2>Actually I'm an anesthesiology resident</h2>
	</div>
	<div class="explanation">
	<p>I'm an anesthesiology resident at Sherbrooke University with still a few years left to do. I live in the intensive care unit and I do some research</p>
	</div>
	</section>

	<section class="panel web-dev">
	<div class="title">
	<h1>2</h1>
	<img src="img/web.jpg">
	<h2>And I'm learning to code</h2>
	</div>
	<div class="explanation">
	<p>I've got good knowledge of HTML, CSS, Jquery, AngularJS and Javascript. Down there you can see some of the projects I've worked on.</p>
	</div>
	<div class="project">
	<div class="row">
	<div class="col-md-4">
	<img src="img/project.png">
	<img src="img/project.png">
	</div>
	<div class="col-md-4">
	<img src="img/project.png">
	<img src="img/project.png">
	</div>
	<div class="col-md-4"></div>
	</div>
	</div>
	</section>

	<section class="panel bordeaux">
	<b>FOUR</b>
	</section>


	<!-- Latest compiled and minified JavaScript -->
	<script src="https://s3.amazonaws.com/codecademy-content/projects/jquery.min.js"></script>

	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

	<!-- Scroll magic-->
	<script src="js/scrollmagic/minified/ScrollMagic.min.js"></script>
	<script src="js/scrollmagic/minified/plugins/debug.addIndicators.min.js"></script>

	<!-- Home made JS-->
	<script rel="javascript" src="js/app.js"></script>

	</body>
	body, panel, section, html {
	height:100%;
	width:100%;
	margin:0px;
	padding:0px;
	font-family: 'Droid Sans', sans-serif;
	}

	.container {
	width:100%;
	}

	/header/
	.header {
	position:fixed;
	height:auto;
	background-color:white;
	border-bottom:none;
	width:100%;
	z-index:1000;
	}

	.header ul {
	list-style-type:none;
	}

	.header ul li {
	color:#fff;
	}

	/**/
	.panel {
	width:100%;
	height:100%;
	margin:0px;
	padding:0px;

	}

	/first panel/
	.intro {
	background:white
	}

	.intro .main {
	background-color:transparent;
	margin-top:100px;
	position:relative;
	}

	.main ul {
	list-style-type:none;
	text-align:right;
	padding-right:20px;
	}

	.main ul li:nth-child(1){
	font-size:74px;
	}

	.main ul li:nth-child(2){
	font-size:25px;
	}

	.main ul li:nth-child(3){
	font-size:33px;
	}

	.main ul li:nth-child(4){
	font-size:31px;
	}

	.main ul li:nth-child(5){
	font-size:24px;
	}

	.main ul li:nth-child(6){
	font-size:31px;
	}

	.main ul li:nth-child(7){
	font-size:12.4px;
	}

	.main img {
	height:300px;
	margin-top:80px;
	}


	/second panel/
	.anesthesia, .web-dev {
	width:100%;
	margin-bottom:400px;
	color:white;
	}

	.title {
	background-size:cover;
	text-align:center;
	width:100%;
	background:rgb(4, 247, 153);
	}

	.title h1, .title h2 {
	padding:40px 0 40px;
	color:white;
	text-align:center;
	}

	.title img {
	display:block;
	margin:auto;
	height:200px;
	width:auto;
	opacity:0.6;
	}

	.explanation {
	width:100%;
	background-color:white;
	color:black;
	text-align:center;
	padding:10px;
	}

	.explanation p {
	margin:20px 300px 800px 300px;
	font-size:22px;
	}

	.web-dev .title {
	background-color:rgb(182, 180, 183);
	}

	.project {
	background-color:white;
	padding-bottom:10px;
	}