Skip to content

Commit 0def56f

Browse files
fazlfazl
committed
First attempt to add top level stucture to webpage
1 parent 5b67154 commit 0def56f

File tree

2 files changed

+36
-29
lines changed

2 files changed

+36
-29
lines changed

‎reintro/birds/index.html

Lines changed: 33 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -4,44 +4,50 @@
44
<meta charset="utf-8">
55
<title>Birdwatching</title>
66
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:300|Cinzel+Decorative:700" rel="stylesheet">
7-
8-
<!--[if lt IE 9]>
9-
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
10-
<![endif]-->
7+
<link href="style.css" rel="stylesheet">
118
</head>
12-
9+
<!-- Need: main, header, nav, article, aside, footer, section -->
1310
<body>
14-
11+
<header>
1512
<h1>Birdwatching</h1>
1613
<img src="dove.png" alt="a simple dove logo">
17-
18-
14+
<nav>
1915
<ul>
2016
<li><span>Home</span></li>
2117
<li><a href="#">Get started</a></li>
2218
<li><a href="#">Photos</a></li>
2319
<li><a href="#">Gear</a></li>
2420
<li><a href="#">Forum</a></li>
2521
</ul>
26-
27-
28-
<h2>Welcome</h2>
29-
30-
<p>Welcome to our fake birdwatching site. If this were a real site, it would be the ideal place to come to learn more about birdwatching, whether you are a beginner looking to learn how to get into birding, or an expert wanting to share ideas, tips, and photos with other like-minded people.</p>
31-
32-
<p>So don't waste time! Get what you need, then turn off that computer and get out into the great outdoors!</p>
33-
34-
<h2>Favourite photos</h2>
35-
36-
<a href="favorite-1.jpg"><img src="favorite-1_th.jpg" alt="Small black bird, black claws, long black slender beak, links to larger version of the image"></a>
37-
<a href="favorite-2.jpg"><img src="favorite-2_th.jpg" alt="Top half of a pretty bird with bright blue plumage on neck, light colored beak, blue headdress, links to larger version of the image"></a>
38-
<a href="favorite-3.jpg"><img src="favorite-3_th.jpg" alt="Top half of a large bird with white plumage, very long curved narrow light colored break, links to larger version of the image"></a>
39-
<a href="favorite-4.jpg"><img src="favorite-4_th.jpg" alt="Large bird, mostly white plumage with black plumage on back and rear, long straight white beak, links to larger version of the image"></a>
40-
41-
42-
<p>This fake website example is CC0 — any part of this code may be reused in any way you wish. Original example written by Chris Mills, 2016.</p>
43-
22+
</nav>
23+
</header>
24+
25+
<main>
26+
<article>
27+
<section>
28+
<h2>Welcome</h2>
29+
<p>Welcome to our fake birdwatching site.
30+
If this were a real site, it would be the ideal place to come to learn more about birdwatching,
31+
whether you are a beginner looking to learn how to get into birding, or an expert wanting to share ideas,
32+
tips, and photos with other like-minded people.</p>
33+
<p>So don't waste time! Get what you need, then turn off that computer and get out into the great outdoors!</p>
34+
</section>
35+
<section>
36+
<h2>Favourite photos</h2>
37+
<a href="favorite-1.jpg"><img src="favorite-1_th.jpg" alt="Small black bird, black claws, long black slender beak, links to larger version of the image"></a>
38+
<a href="favorite-2.jpg"><img src="favorite-2_th.jpg" alt="Top half of a pretty bird with bright blue plumage on neck, light colored beak, blue headdress, links to larger version of the image"></a>
39+
<a href="favorite-3.jpg"><img src="favorite-3_th.jpg" alt="Top half of a large bird with white plumage, very long curved narrow light colored break, links to larger version of the image"></a>
40+
<a href="favorite-4.jpg"><img src="favorite-4_th.jpg" alt="Large bird, mostly white plumage with black plumage on back and rear, long straight white beak, links to larger version of the image"></a>
41+
</section>
42+
</article>
43+
<aside>
44+
<p>This fake website example is CC0 — any part of this code may be reused in any way you wish.
45+
Original example written by Chris Mills, 2016.</p>
46+
</aside>
47+
</main>
48+
49+
<footer>
4450
<p><a href="http://game-icons.net/lorc/originals/dove.html">Dove icon</a> by Lorc.</p>
45-
51+
</footer>
4652
</body>
4753
</html>

‎reintro/birds/style.css

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,7 @@ body > * {
6262
}
6363

6464
main, header, nav, article, aside, footer, section {
65+
/*Green background for specific items */
6566
background-color: rgba(0,255,0,0.5);
6667
padding: 1%;
6768
}
@@ -95,7 +96,6 @@ nav li {
9596
text-align: center;
9697
flex: 1;
9798
}
98-
9999
nav a, nav span {
100100
display: inline-block;
101101
font-size: 2rem;
@@ -104,8 +104,9 @@ nav a, nav span {
104104
text-transform: uppercase;
105105
text-decoration: none;
106106
color: black;
107-
108107
}
108+
/*
109+
*/
109110

110111
/* || main layout */
111112

0 commit comments

Comments
 (0)