FourBoxes/index3.html at master · codrops/FourBoxes · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!DOCTYPE html>
<html lang="en" class="no-js">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>Four Boxes Slideshow | Demo 3</title>
		<meta name="description" content="Four Boxes Slideshow: Recreating the background image slideshow seen on Atelier Serge Thoroval's website" />
		<meta name="keywords" content="background slideshow, boxes, background image, four panels, css, tutorial" />
		<meta name="author" content="Codrops" />
		<link rel="shortcut icon" href="../favicon.ico">
		<link href='http://fonts.googleapis.com/css?family=Raleway:200,400,600' rel='stylesheet' type='text/css'>
		<link rel="stylesheet" type="text/css" href="css/normalize.css" />
		<link rel="stylesheet" type="text/css" href="css/demo.css" />
		<link rel="stylesheet" type="text/css" href="css/component.css" />
		<script src="js/modernizr.custom.js"></script>
	</head>
	<body>
		<div class="container">
			<!-- Top Navigation -->
			<div class="codrops-top clearfix">
				<a class="codrops-icon codrops-icon-prev" href="http://tympanus.net/Development/InlineAnchorStyles/"><span>Previous Demo</span></a>
				<span class="right"><a class="codrops-icon codrops-icon-drop" href="http://tympanus.net/codrops/?p=19242"><span>Back to the Codrops Article</span></a></span>
			</div>
			<div id="boxgallery" class="boxgallery" data-effect="effect-3">
				<div class="panel"><img src="img/2.jpg" alt="Image 2"/></div>
				<div class="panel"><img src="img/3.jpg" alt="Image 3"/></div>
				<div class="panel"><img src="img/1.jpg" alt="Image 1"/></div>
				<div class="panel"><img src="img/4.jpg" alt="Image 4"/></div>
			</div>
			<header class="codrops-header">
				<h1>Four Boxes Slideshow <span>Recreating the background image slideshow seen on <a href="http://www.atelier-serge-thoraval.com/en/">Atelier Serge Thoroval's website</a></span></h1>
				<nav class="codrops-demos">
					<a href="index.html">Serge Thoroval</a>
					<a href="index2.html">Lateral</a>
					<a class="current-demo" href="index3.html">Fall</a>
				</nav>
			</header>
		</div><!-- /container -->
		<script src="js/classie.js"></script>
		<script src="js/boxesFx.js"></script>
		<script>
			new BoxesFx( document.getElementById( 'boxgallery' ) );
		</script>
	</body>
</html>