FreeCodeCamp

freecodecamp.markdown

FreeCodeCamp

A Pen by Timothy Samson on CodePen.

License.

index.html

<div class="container-fluid">
	<div class="well text-center main" >
		<div class="headline">
			<h1 class="text-warning">
				Alan Turing <br/>
			</h1>
			<h2>
				<em>
					"The man who made the modern world"
				</em>
			</h2>
		</div>
		<figure class="alan-turing-img center-block">
			<img src="http://media.gizmodo.co.uk/wp-content/uploads/2013/12/alan-turing.jpg" alt="Alan Turing"/>
			<figcaption>
				Alan Turing
			</figcaption>
		</figure>
	</div>

</div>

script.js

$(document).ready(function(){
	$(".headline").addClass("animated fadeInDown")
	$("img").addClass("img-responsive")
	
	$(".alan-turing-img").addClass("animated fadeInUp")	
})

scripts

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

style.scss

body{
	margin-top: 2%;
}
$margin-sides: 10%;

.main {
	margin-left: $margin-sides;
	margin-right: $margin-sides;
}

styles

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.min.css" rel="stylesheet" />