-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
73 lines (64 loc) · 2.73 KB
/
index.html
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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Responsive Design</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id="wrapper">
<header>
<h1><a href="#"><img src="http://www.w3newbie.com/wp-content/uploads/boxer_logo.png"/></a></h1>
</header>
<nav>
<ul>
<li class='active'><a href="#">Intro</a></li>
<li><a href="#">Size</a></li>
<li><a href="#">Play</a></li>
<li><a href="#">Food</a></li>
</ul>
<div class="clearfix"></div>
</nav>
<aside class="sidebar">
<div id="social">
<table>
<tr>
<td><a href="#"><img src="http://www.w3newbie.com/wp-content/uploads/facebook.png" alt="facebook"/></a></td>
<td><a href="#"><img src="http://www.w3newbie.com/wp-content/uploads/twitter.png" alt="twitter"/></a></td>
<td><a href="#"><img src="http://www.w3newbie.com/wp-content/uploads/youtube.png" alt="youtube"/></a></td>
<td><a href="#"><img src="http://www.w3newbie.com/wp-content/uploads/google_plus.png" alt="google plus"/></a></td>
</tr>
</table>
</div>
</aside>
<section class="left-col">
<h3>My Boxer Dog</h3>
<img src="http://www.w3newbie.com/wp-content/uploads/boxer1.png"/>
<p>If there isn't enough content in this section, you'll find that the "Play" section doesn't line up properly - read on in the "Size" section for an explanation!<br><br>So here is another line of content so it definitely lines up properly.</p>
</section>
<aside class="sidebar">
<h3>Size</h3>
<img src="http://www.w3newbie.com/wp-content/uploads/boxer2.png"/>
<p>With responsive websites, it's important to remember that the section or aside classes will display in the order which they are listed in the source code, so if the "Play section appears next to this one ("Size"), order "Food" under "Size" in your source code.</p>
</aside>
<aside class="sidebar">
<h3>Play</h3>
<img src="http://www.w3newbie.com/wp-content/uploads/boxer3.png"/>
<p>Feel free to download the source code to the website tutorial or you can take a look at the source code of this very web page as an internal style sheet was used.</p>
</aside>
<section class="left-col">
<h3>Food</h3>
<div class="vid">
<iframe width="560" height="315" src="http://www.youtube.com/embed/3-0A5LRfdj4" frameborder="0" allowfullscreen></iframe>
</div>
<p>Here is the tutorial video itself, rather than the video used in the making of the video which can be found in the downloaded version.</p>
</section>
<div class="clearfix"></div>
<footer id="footer">
<center><h4>© <span id="date">2014</span> www.boxerdog.com All rights reserved...</h4></center>
</footer>
<div class="clearfix"></div>
</div>
</body>
</html>