css3Html5Play/index.php at master · ryanMeredith/css3Html5Play · 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
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
<!doctype html>
<html>
	<head>
	<meta charset="UTF-8";
	<meta name="viewport" content="width=device-width" />
	<title> Fun with Css3 and Responsive Layouts</title>
	<link href='http://fonts.googleapis.com/css?family=Sancreek' rel='stylesheet' type='text/css'>
	<link href="css/index.css" rel="stylesheet" />

	<!--[if lt IE 9]>
		<script src="javascript/html5shiv.js"></script>
	<![endif]-->
	</head>

	<body>
		<div class="pageWrapper">
			<header>
				<nav class="clear">
					<ul>
						<li><a href="#">scale up</a></li>
						<li><a href="#">scale down</a></li>
						<li><a href="#">rotate</a></li>
						<li><a href="#">skew</a></li>
					</ul>
				</nav>
				<h1> css3 all the fun at the fair</h1>
			</header>

			<div class="contentWrapper">
				<div class="columnWrapper">
					<!-- main Content -->
					<article class="main">
						<h2>Is it just an amazing coincidence that I overtook a DeLorean on the motorway?</h2>
						<p><img src="images/meercat.jpg" alt ="a meer cat not a meerkat" class="half left"/></p>
						<div class="limeric">
							<p>A bather whose clothing were strewed</p>
							<p>Winds that left her quite nude</p>
							<p>I saw a man come along</p>
							<p>And unless I am wrong</p>
							<p>You expected this line to be lewd.</p>
						</div>
						<h3>Expect the unexpected, I know I did!</h3>
						<img src="images/llama.jpg" alt="llama in pjamamaamas" class="half right"/>
						<!--
						<p><form action="#" method="post" name="llamaForm" class="formInput">
							To be filled in later
							<input type="submit" name="submit" value="GO!"/>
						</form></p>
						-->
						<h3>Wont you be a darling and pass me a towel</h3>
						<p>The Church has had its problems of late with God refusing to allow sacrificing of children. This has created an uproar in schools as teachers are now forced to do work.</p>
					</article>
					<!-- sidebar -->
					<aside class="sidebarOne">
						<h2>Tomorrow starts with today, yesterday was much better</h2>
						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
						<p><img src="images/mouse.jpg" alt="mouse" class="half left" /></p>
						<h3>What A lovely mouse!</h3>
						<p>For mouse recipes go to the BBC website, alternatively grill on a low heat for upto an hour or until the squeeking stops.</p>
						<h3>Just kidding, Rat tastes much better</h3>
						<p>Rat recipes: RatOvan, a rat run over by a van. Ratatouille, two rats run over by a van.</p>
					</aside>
				</div>
				<!-- sidebar two -->
				<aside class="sidebarTwo">
					<h2>Look the other way it is much nicer to the west</h2>
					<p>Important things to remember</p>
					<ul>
						<li>The Moon is made out of the sound old people make when they lose at bingo</li>
						<li>Counting the numbers in Pi is a good way to get to sleep</li>
						<li>Counting the numbers in Tau is much quicker</li>
						<li>You will never be as good a Shakespear as you cannot grow such a marvelous beard</li>
						<li>Do you really think being the Queen is a good job?</li>
					</ul>
					<h3>I was told as a kid that they would turn into NINJAS</h3>
					<img src="images/turtles.jpg" alt="mutant turtles" class="half right"/>
					<p>Can&#39t stop these radical dudes</p>
					<p>The secret of the ooze made the chosen few</p>
					<p>Emerge from the shadows to make their move</p>
					<p>The good guys win and the bad guys lose</p>
				</aside>
			</div>
			<footer>
				<p>&#169; <?=date("d/m/Y") ?> The big nose, little knickers group</p>
				<p>If you wish to talk to some one, there are many good books in the local library that will teach you how</p>
				<p>Email me your suggestions at <a href="notgoingnowhere@fast.com">go-on@dareyou.com</a></p>
			</footer>
		</div>
	</body>
</html>